Css flexbox列溢出[重复]

Posted 2023-03-06

【中文标题】Css flexbox列溢出[重复]

【英文标题】：Css flexbox column overflow [duplicate]

【发布时间】：2018-12-09 03:58:27

【问题描述】：

如何避免 flex 列内的水平溢出？例如，我有以下标记：

.container 
    display: flex;


.left, .right 
    height: 300px;


.left 
    flex: 0 0 300px;
    background-color: pink;


.right 

    flex: 1 0;
    background-color: lightblue;


.inner-container
    padding-left: 16px;
    padding-right: 16px;
    width: 100%;

    /*for testing purpose*/
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;

<div class="container">
  <div class="left"></div>
  <div class="right">
    <div class="inner-container">
      Inner container
    </div>
  </div>
</div>

如您所见，flex 容器内有两个项目：左边一个是 300px 宽度，右边一个占据容器内所有剩余空间。如果我要在右 flex 列中添加另一个全角容器，它会导致水平溢出。如何防止这种行为？谢谢。

【参考方案1】：

将box-sizing: border-box 添加到.inner-container。

.container 
  display: flex;


.left,
.right 
  height: 300px;


.left 
  flex: 0 0 300px;
  background-color: pink;


.right 
  flex: 1 0;
  background-color: lightblue;


.inner-container 
  padding-left: 16px;
  padding-right: 16px;
  width: 100%;
  /*for testing purpose*/
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  box-sizing: border-box; /* NEW */

<div class="container">
  <div class="left"></div>
  <div class="right">
    <div class="inner-container">
      Inner container
    </div>
  </div>
</div>

【讨论】：

为什么会这样？

因为默认的box-sizing 值是content，它没有考虑填充和边框的长度。更多细节在这里：***.com/a/45059944/3597276@AlexvonBrandenfels