使用 flex 布局防止 DIV 溢出容器

Question

我使用display: flex有一个相当复杂的布局。 顶层是三列布局。 第二级在第一列和第二列中有许多行。 在这些行中的每一行中，都有许多要布置的表。

这一切都正常。 但是，在中间列中，我有一个大小不同的 DIV - 图像中的那个大灰色框。 问题是当它很高时，它可能会溢出容器的底部。 我希望容器根据需要扩展到灰色 DIV 的高度。

如何做到这一点？ 这是代码，也在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>

Answer 1

问题是您强制执行height: 100% ：

html, body, body > div, .column-container,
.left-column, .middle-column, .right-column {
  height: 100%;
}

但是你只想要一个最小的高度，并让它们长得更高。 所以用

html, body, body > div, .column-container,
.left-column, .middle-column, .right-column {
  min-height: 100%;
  height: auto;
}

 html, body, body > div, .column-container, .left-column, .middle-column, .right-column { min-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>