Flexbox 可用于垂直对齐元素。但是当一个垂直对齐的元素后来增长时,它可以逃脱其 flexbox 容器的边界。即使在元素上使用 overflow:auto
时也会发生这种情况。
这是一个包含一些预期结果和实际结果的演示。
使用演示:
- Open the demo
- 在灰色框中输入大量文本
预期结果:
输入文本后,段落会变高。当段落与其 flexbox 容器一样高时,它停止增长并显示垂直滚动条。
实际结果:
段落随着文本的输入而变高,但不会停止增长。它最终会脱离其 flexbox 容器的边界。永远不会显示滚动条。
其他注意事项:
将 overflow:auto
放在容器上很诱人,但这并没有像预期的那样工作。试试看。输入大量文本,然后向上滚动。请注意,顶部填充消失了,并且缺少文本行。
最佳答案
您需要执行以下操作:
在
<p>
上添加“最大高度:100%”防止它无限增长的元素。如果你想保留你的
padding
在<p>
上,您还需要设置box-sizing: border-box
将其填充包含在max-height
中.
(技术上 box-sizing:padding-box
是您想要的,但 Chrome 不支持它;因此,border-box
可以,因为它与填充框相同,因为没有边框。)
关于css - 当元素大于其 flexbox 容器时不显示滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27517735/