Структура HTML и Flexbox не работает должным образом

Question

Здравствуйте, я не был уверен, что на самом деле назвать это название. Я не мог придумать точное имя для него, но не могу понять, почему класс «topb» находится в «нижнем» классе, когда в HTML это не так. Структура, которой я занимаюсь, следующая. Верхним родителем является «.container», затем у меня есть две дочерние строки («верхняя» и «нижняя»). В «top» у меня есть «topa» и «topb» как дети, оба из которых я хочу разделить строку. Теперь в примере почему-то «topb», который имеет черный для своего черного, находится в нижней строке по какой-то причине, когда мне это нужно в верхней части. Я почти уверен, что это глупая ошибка, но я просто переживаю этот этап осознания того, что нужно искать, потому что, когда я делаю эти простые вещи.

-Спасибо

.container { 
 
    display: flex; 
 
    position: relative; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
    align-items: stretch; 
 
    height: 100vh; 
 
    width: 80%; \t 
 
\t /*padding-top: 2%; 
 
\t padding-bottom: 18%; 
 
    margin: 5% auto 8% auto; */ 
 
    background-color: white; 
 
} 
 
.container h2 { 
 
\t color: orange; 
 
} 
 
.top { 
 
\t display: flex; 
 
\t flex-flow: row wrap; 
 
\t justify-content: center; 
 
\t align-items: center; \t 
 
\t border: 2px solid blue; \t \t 
 
} 
 
.top * { 
 
\t flex: 1 1 50%; 
 
} 
 
.bottom { 
 
\t display: flex; 
 
\t flex-flow: row wrap; 
 
\t justify-content: space-around; 
 
\t align-items: flex-start; 
 
\t border: 2px solid red; 
 
} 
 
.top, 
 
.bottom { 
 
\t width: 100%; 
 
} 
 
.topa { 
 
\t display: flex; 
 
\t flex-flow: row wrap; 
 
\t justify-content: center; 
 
\t align-content: center; 
 
\t border: 2px solid orange; 
 
\t height: 100%; 
 
} 
 
.topb { 
 
\t display: flex; 
 
\t flex-flow: row wrap; 
 
\t justify-content: center; 
 
\t align-content: center; 
 
\t border: 2px solid purple; 
 
\t background-color: black; 
 
\t height: 100%; 
 
}

<div id="bigwrap"> 
 
\t <div class="container"> 
 
    \t <div class="top"> 
 
     \t <div class="topa"> 
 
      </div> 
 
      <div class="topb"> 
 
      </div>   
 
     </div> 
 
     <div class="bottom"> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

Изменить это:

.top * { 
    flex: 1 1 50%; 
} 

Для этого:

.top * { 
    flex: auto; 
} 

https://jsfiddle.net/maspq7np/

Вот небольшая документация: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

Я думаю, что вы хотели что-то вроде этого:

.container { 
 
    display: flex; 
 
    position: relative; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
    height: 100vh; 
 
    width: 80%; 
 
    margin: auto; 
 
    background-color: white; 
 
} 
 
.top { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
    align-items: center; 
 
    border: 2px solid blue; 
 
} 
 
.top, 
 
.bottom { 
 
    flex: 0 0 100%; 
 
    height: 50%; 
 
} 
 
.top * { 
 
    flex: 1 1 50%; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
    align-content: center; 
 
    height: 100%; 
 
} 
 
.topa { 
 
    background: orange; 
 
} 
 
.topb { 
 
    background: purple; 
 
} 
 
.bottom { 
 
    background: red; 
 
}

<div class="container"> 
 
    <div class="top"> 
 
    <div class="topa"></div> 
 
    <div class="topb"></div> 
 
    </div> 
 
    <div class="bottom"> 
 
    </div> 
 
</div>

В вашем примере, нижний ДИВ не имел высоту .... поэтому есть одна возможная причина.