html - Flexbox 高度被忽略

Question

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

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/