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>

CSS Flexbox列溢出

1 个答案: