css - 当元素大于其 flexbox 容器时不显示滚动条

Question

Flexbox 可用于垂直对齐元素。但是当一个垂直对齐的元素后来增长时，它可以逃脱其 flexbox 容器的边界。即使在元素上使用 overflow:auto 时也会发生这种情况。

这是一个包含一些预期结果和实际结果的演示。

使用演示:

1. Open the demo
2. 在灰色框中输入大量文本

预期结果:

输入文本后，段落会变高。当段落与其 flexbox 容器一样高时，它停止增长并显示垂直滚动条。

实际结果:

段落随着文本的输入而变高，但不会停止增长。它最终会脱离其 flexbox 容器的边界。永远不会显示滚动条。

其他注意事项:

将 overflow:auto 放在容器上很诱人，但这并没有像预期的那样工作。试试看。输入大量文本，然后向上滚动。请注意，顶部填充消失了，并且缺少文本行。

Answer 1

您需要执行以下操作:

1. 在 <p> 上添加“最大高度:100%”防止它无限增长的元素。

2. 如果你想保留你的 padding在 <p> 上，您还需要设置box-sizing: border-box将其填充包含在 max-height 中.

(技术上 box-sizing:padding-box 是您想要的，但 Chrome 不支持它；因此，border-box 可以，因为它与填充框相同，因为没有边框。)

Here's your JS Fiddle with this fix