I have a fairly complex layout using display: flex. At the top level is a three column layout. Second level has a number of rows within column one and two. Within each of those rows there are a number of tables to lay out.
This is all generally OK. However, within the middle column I have a DIV that can vary in size - that big grey box in the image. The problem is that when it's tall it can overflow the bottom of its container. I'd like the container to expand as required to the height of the grey DIV.
How to achieve that? Here's the code, also on CodePen.
html,
body,
body > div,
.column-container,
.left-column, .middle-column, .right-column
{
height: 100%;
}
.column-container {
display: flex; /* To support three column layout. */
}
.mimic-drawing {
width: 150px;
height: 1000px;
background-color: lightgrey;
border: 3px solid saddlebrown;
border-radius: 5px;
margin: auto; /* Center horizontally and vertically. */
}
.wheel-container {
align-items: flex-start; /* Lay out measurement tables at the start of the cross axis. */
background-color: olive;
display: flex; /* So measurement tables can be layed. */
flex: 1 0 auto; /* Don't allow wheel containers to shrink and cause content (measurements) to be hidden.' */
}
.left-column, .right-column {
background: lightskyblue;
display: flex; /* So wheel containers can be layed out. */
flex: 1; /* Compare to the .middle-column */
flex-flow: column nowrap; /* Lay out wheel containers on Y axis. */
justify-content: space-between; /* Evenly space the wheel containers. */
}
.left-column .wheel-container {
flex-flow: row-reverse wrap; /* Layout measurement tables right to left. */
}
.middle-column {
background: lightcyan;
display: flex; /* So drawing can be centralised. */
flex: 0.5; /* Compare to the .left-column and .right-column. */
}
.right-column .wheel-container {
flex-flow: row wrap; /* Layout measurement tables left to right. */
}
.wheel-number, .HBD, .BAM, .BS, .WILD, .WP {
margin: 0.25em;
}
.HBD {
width: 96px;
height: 45px;
background-color: rgb(255, 249, 229);
}
.HBD:after {
content: 'Type Five'
}
.BAM {
width: 80px;
height: 30px;
background-color: rgb(229, 240, 255);
}
.BAM:after {
content: 'Type Four'
}
.BS {
width: 99px;
height: 30px;
background-color: rgb(233, 251, 232);
}
.BS:after {
content: 'Type One'
}
.WILD {
width: 78px;
height: 60px;
background-color: rgb(230, 230, 250);
}
.WILD:after {
content: 'Type Two'
}
.WP {
border: 2px solid darkred;
width: 171px;
height: 75px;
background-color: rgb(255, 238, 229);
}
.WP:after {
content: 'Type Three'
}<div class='column-container'>
<div class='left-column'>
<div class='wheel-container'>
<span class='wheel-number label label-info'>n</span>
<div class='HBD'></div>
<div class='BAM'></div>
<div class='BS'></div>
<div class='WILD'></div>
<div class='WP'></div>
</div>
<div class='wheel-container'>
<span class='wheel-number label label-info'>n</span>
<div class='HBD'></div>
<div class='BAM'></div>
<div class='BS'></div>
<div class='WILD'></div>
<div class='WP'></div>
</div>
<div class='wheel-container'>
<span class='wheel-number label label-info'>n</span>
<div class='HBD'></div>
<div class='BAM'></div>
<div class='BS'></div>
<div class='WILD'></div>
<div class='WP'></div>
</div>
<div class='wheel-container'>
<span class='wheel-number label label-info'>n</span>
<div class='HBD'></div>
<div class='BAM'></div>
<div class='BS'></div>
<div class='WILD'></div>
<div class='WP'></div>
</div>
</div>
<div class='middle-column'>
<div class='mimic-drawing'>Oh dear, I overflow the bottom of my container. :-(</div>
</div>
<div class='right-column'>
<div class='wheel-container'>
<span class='wheel-number label label-info'>n</span>
<div class='HBD'></div>
<div class='BAM'></div>
<div class='BS'></div>
<div class='WILD'></div>
<div class='WP'></div>
</div>
<div class='wheel-container'>
<span class='wheel-number label label-info'>n</span>
<div class='HBD'></div>
<div class='BAM'></div>
<div class='BS'></div>
<div class='WILD'></div>
<div class='WP'></div>
</div>
<div class='wheel-container'>
<span class='wheel-number label label-info'>n</span>
<div class='HBD'></div>
<div class='BAM'></div>
<div class='BS'></div>
<div class='WILD'></div>
<div class='WP'></div>
</div>
<div class='wheel-container'>
<span class='wheel-number label label-info'>n</span>
<div class='HBD'></div>
<div class='BAM'></div>
<div class='BS'></div>
<div class='WILD'></div>
<div class='WP'></div>
</div>
</div>
</div> 
The problem is that you enforce
height: 100%:But you only want a minimum height, and allow them to grow taller. So use