Question

我正在使用flexbox构建一个模态，它有两行设计：

|-------------------|
|          A        |
|-------------------|
|                   |
|         B         |
|                   |
|                   |
|-------------------|

由于A和B都是模态的一部分，高度以百分比表示，而不是以px表示，我使用flexbox为A赋予高度，然后使用可选的滚动条填充剩余空间（如果需要）

为了达到这个目的，我使用以下html + css：

<div class="wrapper">
    <div class="A"></div>
    <div class="B"></div>
</div>

.wrapper {
    display: flex;
    flex-direction: colum;
    height: 100%;
}

.A {
    height: 70px;
    width: 100%;
}

.B {
    margin: 10px 20px 10px 20px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

问题在于，根据B的内容，A的高度会发生变化。有些内容固定为70px，其他一些内容可能是24px，如果我检查css规则，我可以看到高度为24px，当我点击规则时，它会突出显示“高度：70px”代码行。

如果我在包装器中删除“display：flex”，高度对于任何类型的内容都是正确的，但div B溢出模态并完全忽略规则“overflow-y：auto”。

我该如何解决这个问题？

Answer 1

如果您将flex: 0 0 70px;与min-height: 0;或overflow: hidden结合使用，则应确保A始终保持70px高。

第一个0 flex-grow 会阻止它增长，第二个0是 flex-shrink 会阻止它缩小，min-height / overflow将允许它也小于其内容，默认情况下它不是（min-height默认为auto，这会阻止灵活项目小于其内容）。

最后70px是 flex-basis ，这是height的Flexbox版本，我建议你改用它。

请注意，您n的{{1}}内缺少colum个。{/ em>

＆＃13;
＆＃13;
flex-direction
＆＃13;
.wrapper { display: flex; flex-direction: column; height: 90vh; background: lightgray; } .A { flex: 0 0 70px; width: 100%; min-height: 0; background: lightblue; } .B { margin: 10px 20px 10px 20px; flex-grow: 1; overflow-y: auto; overflow-x: hidden; background: lightgreen; }
＆＃13;
＆＃13;
＆＃13;

Answer 2

如果B的内容是＆＃34;更高＆＃34; B的高度比B的高度增长，以某种方式容纳内容物。这导致A的高度减小以进行调整。为了禁止A缩小，请将flex-shrink: 0添加到其样式中。

Flexbox：div忽略高度属性

2 个答案: