На Android всплывает footer и aside страницы (html/css). Флекс не кроссбраузерный?

Обнаружила такую проблему на своем сайте. Именно во встроенном браузере на Android. В Опере, Макстоне и Dolphin Browser, Next Browser тоже, как оказалось. На других ОС (и в браузерах FireFox, Google Chrome и Puffin для Android) всё в порядке.

Тут мне подсказали, что во флекс может быть проблема. Может, префиксы нужны какие-то? Где их берут?

Всплывает только в портретной ориентации (max-width?), в ландшафтной - всё на своем месте.

А может, это не в footer и aside проблема? На android, похоже, блок article вообще пустой и минимальной высоты. Отображается под хэдером как узкая полоска. А должен бы содержать весь тот текст, который "уполз" под футер.

Я новичок в css, первый мой сайт с его использованием. Помогите решить, будьте добры. Стили такие:

   @charset "utf-8";
/* CSS Document */

* {margin: 0; padding: 0;}  
/* Сброс стилей */

/* Конец сброса стилей*/

    html { 
    min-height: 100%;
    width: 100%;
    font-size: 100%; } /* Браузерное умолчание, т.е. 16px  */     
h1 { 
font-size: 5vmin; 
font-size: 1.5rem; 
}   
h2 { 
font-size: 3.5vmin; 
font-size: 1.2rem; 
text-align: center;
line-height: 1;
}   
h4 { 
font-size: 3vmin; 
font-size: 1rem; 
font-weight: normal;
text-align: center;
display:inline;}  
h5 { 
text-align: center;
line-height: 1.5;
}     

h6 { 
text-align: center;
line-height: 1.5;
}     
p { 
font-size: 3vmin; 
font-size: 0.9rem; 
}
.accordion h3 {
font-size: 2.2vmin;
font-size: 0.7rem;
display: block; 
}   
.title_block {
    line-height: 1.7; /* 34px */}
#map {display:block}        



    body {
         font-size: 100%;
    line-height: 1.6875;
    font-family: Georgia;
    height: 100%;
    min-height: 100%;
    }
    #main {
        margin: 0px;
        padding: 0px;
        display: flex;
        flex-flow: row;
    }
    #main > article {
        height: 100%;
        margin: 4px;
        padding: 10px 20px 10px 20px;
        border: 1px solid #87a7b1;
        border-radius: 7pt;
        background: #F7F7F7;
        flex: 3 1 60%;
        order: 2;
        text-align:justify;
    }

    #main > aside {
        margin: 4px;
        padding: 7px;
        border: 1px solid #8888bb;
        border-radius: 7pt;
        background: #eceeec;
        flex: 1 6 20%;
        order: 3;
        border: 1px solid #9cb6be;
        border-radius: 7pt;
        padding-bottom: 35px;
    }
    header {
        position: relative;
        display: block;
        margin: 4px;
        padding: 5px;
        height: auto;
        min-height: 100px;
        border: 1px solid #9cb6be;
        border-radius: 7pt;
        background: #e4ebed;
    }
    footer  {
        position: relative;
        display: block;
        margin: 4px;
        padding: 5px;
        height: auto;
        min-height: 85px;
        border: 1px solid #9cb6be;
        border-radius: 7pt;
        background: #C9D1C7;    
    }

img {
    max-width: 100%;
}

a { color:#0043AF; } 

    /* Too narrow to support three columns */
    @media all and (max-width: 640px) {
        #main, #page {
            flex-direction: column;
        }
        #main > article, #main > nav, #main > aside {
        /* Return them to document order */
            order: 0;
        }
         #main > nav, #main > aside, header
         {
            min-height: 40px;
            max-height: 500px;
        }
        footer {min-height: 100px;}
    }