Flexbox 高度被忽略

Question

有人可以帮我解决这个问题吗？我不知道为什么我的身高：50%；以下 flexbox 规则被忽略。为了可见性，我在所有 children 周围都设置了边框。两行的高度应该相等。

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

<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 class="bottom">
        </div>
    </div>
</div>

Answer 1

您的 html 需要清理一下。您的 div 未正确打开和关闭。应该是这样的：

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

Flexbox 高度被忽略

Flexbox height being ignored

html

css

height

flexbox