Flexbox：div 忽略高度属性

Question

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

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

由于A和B都是在一个高度用百分比而不是像素表示的模态中，我使用flexbox来给A一个高度，然后让B填充剩余的空间，并在需要时使用可选滚动条。

为了实现这一点，我使用以下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，当我点击该规则时，它会突出显示代码中的“height: 70px”行。

如果我在包装器中删除"display: flex"，则无论什么类型的内容，高度都保持正确，但是div B会溢出模态框，并完全忽略规则"overflow-y: auto"。

如何解决这个问题？

- ste

---

这应该是 flex-direction: column 而不是 colum。 - Boky

如果有的话，“height:100%”应该从哪个父元素的值计算？修复拼写错误并将高度设为有效值（vh或父元素上的有效高度以计算百分比），您的代码将按预期工作 https://codepen.io/anon/pen/vJvYKG - G-Cyrillus

Answer 1

如果你将flex: 0 0 70px;与 min-height: 0;或者overflow: hidden组合使用，它应该可以确保A始终保持高度为70像素。

第一个0是flex-grow，防止其扩展，第二个0是flex-shrink，防止其收缩，而min-height/overflow也允许其比内容更小，这是默认情况下不会发生的（min-height默认为auto，防止了flex项目变得比其内容更小）。

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

注意，在flex-direction值中，你漏写了n。

.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;
}

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

- Asons

---

完美的解决方案！谢谢！ - ste

Answer 2

如果B的内容比其高度“更高”，那么B的高度会增加以适应内容。这会导致A的高度减小以进行调整。为了防止A收缩，需要在其样式中添加flex-shrink: 0。

- Arnelle Balane