I'm trying to get the three flex children boxes to stretch using flexbox to fill the container so that all three boxes are the same size. However, I don't want the first two inside boxes to stretch - I always want them to be the same size. Kind of hard to explain, so here's what I want it to look like this:
Where the red boxes are all equal and fixed height as each other, same with the blue boxes (height relationship between red and blue boxes not important), and the green box is the one that stretches to however big the biggest black box is. So I want to avoid something like this, for example:
Here's a JSFiddle: http://jsfiddle.net/agentemi1y/ssxu5moy/
Here's the basic html:
<div class="container">
<div class="box box1">
<div class="inside-box"></div>
<div class="inside-box"></div>
<div class="inside-box last-box"></div>
</div>
<div class="box box2">
<div class="inside-box"></div>
<div class="inside-box"></div>
<div class="inside-box last-box"></div>
</div>
<div class="box box3">
<div class="inside-box"></div>
<div class="inside-box"></div>
<div class="inside-box last-box"></div>
</div>
.container {
border: 1px solid red;
width:90%;
height: 100px;
display:flex;
justify-content: center;
align-items: center;
align-content: stretch;
}
.box {
border: 1px solid purple;
flex: 0 1 33%;
margin: 0 20px;
align-self: stretch;
display:flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
}
.inside-box {
border: 1px solid green;
min-height: 0.5rem;
flex: 0 1 100%;
align-self: flex-start;
}
.last-box {
background-color: pink;
align-self: stretch;
}
NOTE: I can't set a fixed height for the three black boxes, because then if all three boxes only have one icon in them, it'll look dumb.
I forget exactly how I got there, but this jsfiddle seems to do what you want. (I think I mostly just removed a bunch of stretch, and added the simpler flex: 0
/flex: 1
syntax. :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With