css中flex：1为什么还要设置一个heught值如height：0，子元素才可height：100%?

Question

css中flex：1为什么还要设置一个heught值如height：0，子元素才可height：100%

Answer 1

父类只设置 display: flex 也可以

Answer 2

并没有复现你说的情况。最好可以提供一下你的 Demo 代码，或者在 CodePen 或者 CodeSandbox 中复现一个在线 Demo。

👇 这个是两层结构

👇 这个是三层结构。

Answer 3

在使用 CSS 的 flexbox 布局时，flex: 1 表示一个弹性项目将占据父容器的可用空间，以实现自动调整大小的效果。然而，有时候在某些情况下，设置 flex: 1 并不足以使子元素的高度生效。这是因为在默认情况下，弹性项目的高度是由其内容的高度决定的，而不是由父容器撑开。

因此，添加 height: 0 是为了确保父容器的高度为 0，然后使用 flex: 1 将父容器的高度撑开，最后通过设置子元素的 align-self: stretch 和 height: 100% 来使子元素的高度与父容器一致。