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

HTML and Flexbox structure not working as expected

Hello I wasn't too sure what to really call this title. I couldn't think of an exact name for it but I cannot figure out for the life of me why the 'topb' class is in the 'bottom' class, when in the HTML it is not. The structure I'm after is as follows. Top parent is '.container', then I have two child rows('top' and 'bottom'). In 'top' I have 'topa' and 'topb' as children, both of which I want to share a row. Now in the example for some reason the 'topb', which has black for its blackground is in the bottom row for some reason when I need it in the top. I'm pretty sure it's a stupid error but I'm just going through this phase of being aware of what to look out for, for when I do these simple things.

-Thank you



.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;
}
.container h2 {
color: orange;
}
.top {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
border: 2px solid blue;
}
.top * {
flex: 1 1 50%;
}
.bottom {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: flex-start;
border: 2px solid red;
}
.top,
.bottom {
width: 100%;
}
.topa {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
border: 2px solid orange;
height: 100%;
}
.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>
<div class="topb">
</div>
</div>
<div class="bottom">
</div>
</div>
</div>




Answer

I think you wanted something like this:

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

In your example, the bottom div had no height....so there's one possible reason.

Comments