如何在嵌套弹性框上下文中控制后代框的高度?

Question

.main {
height: 100px;
width: 100px;
border: 1px solid;
background: green;
}
.columns {
display: flex;
}
.columns.vertical {
flex-direction: column;
flex-wrap: nowrap;
}
.box22 {
overflow: auto;
}
.box1 {
background: red;
}
.box2 {
background: orange;
border: 1px blue solid;
}
.box222 {
background: white;
border: 1px blue solid;
}

<md-content class="md-padding">
<div class="main columns vertical">
<nav class="box1">nav</nav>
<div class="box columns vertical">
<div class="b">asdasd</div>
<div class="box2 columns vertical">
<div class="box21 columns">
box21
</div>
<div class="box22 columns">
<div class="box221">box221</div>
<div class="box222">
<p>a</p>
<p>a</p>
</div>
</div>
</div>
</div>
</div>
</md-content>

我手动设置了最外层框main的高度，也设置了box22overflow:auto，但是box22伸展了main框，没有显示滚动条。

我想要的是在最外面的盒子中设置高度，嵌套的内框可以自动控制它的高度，因此所有盒子都适合。如何解决这类问题，我应该为所有后代框设置高度吗？

我测试了overflow :autobox(level1)、box2(level2)和box22(level3)的设置，只有box(level1)可以自动控制它的高度，并在高度叠加时显示滚动条。

我想要的如下所示，但是，要实现此目的，我需要手动指定box22的父亲框。换句话说，如果我想使一个柔性连接器可滚动，我必须至少设置它的父亲框的高度，这是无法容纳的。

.main {
height: 100px;
width: 100px;
border: 1px solid;
background: green;
}
.columns {
display: flex;
}
.columns.vertical {
flex-direction: column;
flex-wrap: nowrap;
}
.box22 {
overflow: auto;
}
.box1 {
background: red;
}
.box2 {
height:64px;
background: orange;
border: 1px blue solid;
}
.box21 {
background: yellow;
}
.box222 {
background: white;
border: 1px blue solid;
margin-top: auto;
}

<md-content class="md-padding">
<div class="main columns vertical">
<nav class="box1">nav</nav>
<div class="box columns vertical">
<div class="b">asdasd</div>
<div class="box2 columns vertical">
<div class="box21 columns">
box21
</div>
<div class="box22 columns">
<div class="box221">box221</div>
<div class="box222">
<p>a</p>
<p>a</p>
<p>a</p>
</div>
</div>
</div>
</div>
</div>
</md-content>

Answer 1

好吧，正如您所指出的，父容器需要高度声明才能生成滚动条。

这是有道理的，因为如果没有固定长度，则无法触发溢出条件。

使用灵活的长度(例如，height: auto(，容器将收缩和扩展以适应内容，永远不会触发溢出，因此永远不会生成滚动条。

MDN 是这样描述的：

为了使overflow生效，块级容器必须具有设置的高度(height或max-height(或设置为nowrapwhite-space。

所以这就是你的障碍。以下是您如何解决它(知道您无法设置更多高度(：

1. 为浏览器提供触发溢出所需的内容：设置一个很小的 (1px( 高度。
2. 您可以获得所需的完整高度：使用flex-grow消耗剩余空间。

所以像这样的事情...

height: 1px;
flex-grow: 1;

但更有效：

flex: 1 0 1px; /* fg, fs, fb */

将此添加到您的代码中：

.main  .columns.vertical {
flex: 1 0 1px;
}
.box22 {
flex: 1 0 1px;
}

.main {
height: 100px;
width: 100px;
border: 1px solid;
background: green;
}
/* NEW */
.main .columns.vertical {
flex: 1 0 1px;
}
/* ADJUSTMENT */
.box22 {
flex: 1 0 1px;
overflow: auto;
}
.columns {
display: flex;
}
.columns.vertical {
flex-direction: column;
flex-wrap: nowrap;
}
.box22 {
flex: 1 0 1px;
overflow: auto;
}
.box1 {
background: red;
}
.box2 {
background: orange;
border: 1px blue solid;
}
.box222 {
background: white;
border: 1px blue solid;
}

<md-content class="md-padding">
<div class="main columns vertical">
<nav class="box1">nav</nav>
<div class="box columns vertical">
<div class="b">asdasd</div>
<div class="box2 columns vertical">
<div class="box21 columns">box21</div>
<div class="box22 columns">
<div class="box221">box221</div>
<div class="box222">
<p>a</p>
<p>a</p>
</div>
</div>
</div>
</div>
</div>
</md-content>

Answer 2

考虑在主上使用最大高度而不是高度...如果你从弹性框开始...最佳显示：在整个链条中灵活

.top {
position: static;
height: 200px;
width: 200px;
max-height: 200px;
max-width: 200px;
overflow: auto;
}
.flexcol {
width: 100%;
display: flex;
flex-direction: column;
padding: 0;
}
.mynav {
display: flex;
flex-direction: row;
flex-grow: 1;
background-color: blue;
}
.box1 {
display: flex;
flex-grow: 1;
background-color: red;
}
.box2 {
display: flex;
flex-direction: column;
flex-grow: 1;
background-color: green;
}
.box3 {
display: flex;
flex-grow: 1;
background-color: yellow;
}
.box221 {
min-height: 50px;
background-color: pink;
width: 100%;
}
.box222 {
min-height: 50px;
background-color: grey;
width: 100%;
}
.darklink {
color: white;
}

<div class="top">
<div class="flexcol">
<nav class="mynav">
<a class="darklink" href="#" target="_">Link1</a>
<a class="darklink" href="#" target="_">Link2</a>
<a class="darklink" href="#" target="_">Link3</a>
</nav>
<div class="box1">
<p>para</p>
</div>
<div class="box2">
<div class="box221">
<p>para</p>
<p>para</p>
</div>
<div class="box222">
<p>para</p>
<p>para</p>
<p>para</p>
</div>
</div>
<div class="box3">
<p>para</p>
</div>
</div>
</div>