Shinji-san Shinji-san - 1 month ago 25
CSS Question

Flexbox height being ignored

Can someone please help me with this. I have no idea why my height: 50%; rule is being ignored in the following flexbox. I have borders around all the children for visibility sake. Both rows should take up equal height.



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

Your html needs some cleaning up. Your divs weren't opened and closed properly. Should be this:

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

Here is a JSFiddle to demonstrate: https://jsfiddle.net/6pLcn9bu/