HTMLとFlexboxの構造が正常に動作しない

Question

こんにちは私はこのタイトルを本当に何と呼ぶべきかについてはあまりよく分かりませんでした。私はそれの正確な名前を考えることができませんでしたが、なぜ私はHTMLのそれではないときに 'トップクラス'クラスは、 'ボトム'クラスに私の人生のために把握することはできません。後の構造は次の通りです。トップの親は '.container'です。次に、2つの子の行（ 'top'と 'bottom'）があります。 「トップ」には、私は「topa」と「topb」を子どもとして持っています。どちらも一緒に行を共有したいのです。ここの例では、何らかの理由でblackbrockで黒い「topb」が何らかの理由で一番下に表示されます。私はそれが愚かなエラーだと確信していますが、私はこれらの単純なことをするとき、何を目にしているのかを知っているこの段階を辿っています。

-Thankあなた

.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://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>

を、下のDIVには高さがありませんでした....考えられる理由が1つあります。