Css flexbox列溢出[重复]

Question

如何避免 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 列中添加另一个全角容器，它会导致水平溢出。如何防止这种行为？谢谢。

Answer 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>