Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

why isn't my flexbox flex-stretch property working?

Tags:

css

flexbox

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: enter image description here

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:

enter image description here

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.

like image 207
agentem Avatar asked Nov 14 '14 16:11

agentem


1 Answers

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

like image 146
bwinton Avatar answered Oct 07 '22 23:10

bwinton