使用 flexbox，强制列自动换行，而不是导致容器从其父级溢出

Question

我有一个有三列的弹性容器。中间列填充左右列之间的空间。当容器变窄时，我需要强制左右列换行其文本，而不是将容器拉伸到页面的右侧。我该怎么做？

#main-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  max-width: 100%;
}
#center-content {
  border: 1px solid green;
  flex: 1 1 auto;
}
#left-content, #right-content {
  flex: 0 0 auto;
  border: 1px solid red;
}
.box {
  height: 20px;
  height: 100%;
}

  <div id="main-container">
    <div id="left-content" class="box">
      asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
    </div>
    <div id="center-content" class="box">
      asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
    </div>
    <div id="right-content" class="box">
      asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
    </div>
  </div>

Answer 1

您可以在#center-content元素上使用flex: 1。

#main-container {
  display: flex;
}
#center-content {
  border: 1px solid green;
  flex: 1;
}
#left-content,
#right-content {
  border: 1px solid red;
}

<div id="main-container">
  <div id="left-content" class="box">
    asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
  </div>
  <div id="center-content" class="box">
    asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
  </div>
  <div id="right-content" class="box">
    asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
  </div>
</div>

Answer 2

将 flex 属性更改为 0 auto。看看这个关于 Flexbox 的 CSS 技巧的方便指南。具体来说，关于速记的部分 flex 您使用的属性：

这是弹性增长、弹性收缩和弹性基础组合的简写。第二个和第三个参数(挠缩和挠曲基础(是可选的。默认值为 0 1 自动。

您的问题是因为与其他兄弟姐妹元素相比，您告诉灵活项目"增长"太多。

#main-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  max-width: 100%;
}
#center-content {
  border: 1px solid green;
  flex: 0 auto;
}
#left-content, #right-content {
  flex: 0 auto;
  border: 1px solid red;
}
.box {
  height: 20px;
  height: 100%;
}

  <div id="main-container">
    <div id="left-content" class="box">
      asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
    </div>
    <div id="center-content" class="box">
      asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
    </div>
    <div id="right-content" class="box">
      asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
    </div>
  </div>