I am trying to have a three column layout where every div fits within 1/3 of the container except for the last item, which spans the remaining columns.
I have a working example here: https://codepen.io/anon/pen/vZYLjY I'm looking to get every gray box to have the same width and have the blue boxes expand to fill the rest of the remaining space.
.parent {
display: flex;
flex-flow: row wrap;
}
.child {
flex: 1 0 30%;
}
.parent {
border: 5px solid #EEEEEE;
padding: 5px;
margin: 30px 0;
}
.child {
background-color: #CCCCCC;
padding: 5px;
text-align: center;
color: #FFFFFF;
font-family: helvetica, arial, sans-serif;
line-height: 1;
margin: 5px;
}
.child:last-child {
background-color: #1FBBE6;
}<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>