如何让child-2占满父容器剩余宽度及全部高度（无需固定宽度）

问题场景 #

我们有如下HTML结构：

<div class="parent">
   <div class="child-1">
      Hello World!
   </div>
   <div class="child-2">
   </div>
</div>

最初为实现child-1占30%宽度、child-2占父容器剩余宽度，使用了以下样式：

.child-1{
   width:30%;
}
.child-2{
   float: none;
   overflow: hidden;
}

该方案满足宽度需求，但无法让child-2占满父容器高度。给父容器添加Flex布局后：

.parent{
   display:flex
}

child-2高度占满，但不再自动占据剩余宽度。需求是无需固定child-2宽度，同时实现它占满剩余宽度及父容器全部高度。

解决方案 #

利用Flex布局的flex-grow属性即可实现，调整样式如下：

.parent{
   display: flex;
   /* 若父容器需要特定高度，可自行设置，比如 height: 200px; */
}
.child-1{
   width: 30%;
}
.child-2{
   flex-grow: 1; /* 核心：自动占据父容器剩余所有宽度 */
}

原理说明 #

• display: flex使父容器成为Flex容器，子项默认沿主轴排列，且默认align-items: stretch会让子项高度自动拉伸至与父容器/最高子项一致，满足高度需求。
• flex-grow: 1让child-2分配父容器中除child-1占据的30%宽度外的所有剩余空间，完美适配“自动占剩余宽度”的需求。

内容的提问来源于stack exchange，提问作者karlosuccess