在前端开发中，使用 Flexbox 布局是非常常见的。但是，在使用 Flexbox 时，经常会遇到一个问题，就是容器和子元素的高度一定无法自适应。这是因为，Flexbox 布局默认的是根据内容的大小来决定高度。
本文将介绍如何解决这个问题，同时提供示例代码和实际运用场景以供参考。
解决方案
要解决容器和子元素高度一定的问题，我们需要借助一些 CSS 属性和技巧。以下是一些可行的解决方案。
1. 设定容器高度
首先，我们可以通过设置容器的高度来解决这个问题。在容器上添加属性 height: 100%，这将使容器的高度自适应父元素的大小。
示例代码如下：
---------- - -------- ----- --------------- ------- ------- ----- -
2. 利用 flex-grow 属性
我们还可以使用 flex-grow 属性来解决容器和子元素高度一定的问题。在此种方法下，将会自动处理各子元素占据空间的比例。
首先，给父容器设置 display: flex; 属性，使其成为一个 Flex 容器。接下来，将子元素的 flex-grow 属性设置为 1，这将使子元素自适应父容器的大小。
示例代码如下：
---------- - -------- ----- --------------- ------- - ---------- ------ - ---------- -- -
3. 利用 min-height 属性
还可以利用 min-height 属性，使容器和子元素的高度一定。将容器的 min-height 属性设置为 100vh，这将使容器的高度等于视口的高度。
示例代码如下：
---------- - -------- ----- --------------- ------- ----------- ------ -
总结
以上三种方法是解决 Flexbox 容器和子元素高度一定问题的有效方式，可以根据实际情况来选取其中的任一方法。若在开发过程中遇到该问题，可参考本文进行解决。
本文提供了示例代码和实际运用场景，希望可以为读者提供一些指导性和参考性的内容。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6523761495b1f8cacdae3847