フレックスボックスの高さが無視されています

Question

誰か助けてもらえますか？私はなぜ私の身長：50％;ルールは次のフレックスボックスで無視されています。私は視界のためにすべての子供の周りに国境を持っています。両方の行は同じ高さを占める必要があります。

html, 
 
body { 
 
\t height: 100%; 
 
} 
 
.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; 
 
\t border: 2px solid red; 
 
} 
 
.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 
 
} 
 
.top * { 
 
\t 1 1 50%; 
 
\t display: flex; 
 
\t flex-flow: row wrap; 
 
\t justify-content: center; 
 
\t align-content: center; 
 
\t height: 100%; 
 
} 
 
.bottom { 
 
\t display: flex; 
 
\t flex-flow: row wrap; 
 
\t justify-content: space-around; 
 
\t align-items: flex-start; 
 
\t border: 2px solid orange; 
 
} 
 
.top, 
 
.bottom { 
 
\t flex: 0 0 100%; 
 
\t height: 50%; 
 
} 
 
.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%; 
 
\t background-color: orange; 
 
} 
 
.topa inner { 
 
width: auto; 
 
height: auto; 
 
} 
 
.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"> 
 
      \t <div class="inner"> 
 
      \t \t <img src="chocolate.jpg" width="209" height="205" alt="Picture of kid" /> 
 
       </div> 
 
      \t <div class="inner"> 
 
      \t  <img src="cookies.jpg" width="209" height="205" alt="Picture of kid" /> 
 
      </div> 
 
      <div class="topb"> 
 
      </div>   
 
     </div> 
 
     <div class="bottom"> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

あなたのHTMLは、いくつかのクリーニングアップを必要とします。あなたの部門は開かれておらず、適切に閉じられました。このようになります。

ここ

<div id="bigwrap"> 
    <div class="container"> 
    <div class="top"> 
     <div class="topa"> 
     <div class="inner"> 
      <img src="chocolate.jpg" width="209" height="205" alt="Picture of kid" /> 
     </div> 
     <div class="inner"> 
      <img src="cookies.jpg" width="209" height="205" alt="Picture of kid" /> 
     </div> 
     <div class="topb"> 
     </div>   
     </div> 
    </div> 
    <div class="bottom"> 
    </div> 
    </div> 
</div> 

実証するJSFiddleは次のとおりです。https://jsfiddle.net/6pLcn9bu/