flex: 1；子元素高度较高时不展示滚动条而是撑开父元素

作者：System 时间：2024年08月25日分类：所有,css3 字数：427

flex: 1; 是CSS样式中的Flexbox布局属性，用于分配容器内的可用空间。当子元素的高度较高时，父容器将会被撑开以适应子元素的高度。

如果你希望在子元素高度较高时展示滚动条而不是撑开父元素，你可以使用以下CSS样式：




.parent {
  display: flex;
  overflow: auto; /* 添加滚动条 */
}
 
.child {
  flex: 1;
  min-height: 0; /* 防止flex项目被最小高度min-height:0的项目撑开 */
}

HTML结构如下：




<div class="parent">
  <div class="child">
    <!-- 子元素内容 -->
  </div>
</div>

这样设置后，当子元素的高度超出父容器时，父容器将展示滚动条而不是撑开。