溢出：滚动不适用于弹性项目答案

【问题标题】：overflow:scroll not working on flex items溢出：滚动不适用于弹性项目
【发布时间】：2016-09-23 09:18:10
【问题描述】：

我有三个 div：

01 区
Div 02 - 固定宽度 300 像素
03 分区

Div 01 和 Div 03 的宽度应该相同。

例子：

如果视口为 1000px，Div 01 宽度=350px，Div 03 宽度=350px，
如果视口为 800 像素，则 Div 01 宽度=250 像素，Div 03 宽度=250 像素。

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
.flex-item {
  background: red;
  flex: 1 auto;
  height: 400px;
}
.middle {
  background: blue;
  width: 300px;
}

<div class="flex-container">
  <div class="flex-item">This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text.</div>
  <div class="middle">sd</div>
  <div class="flex-item">sd</div>
</div>

这是我想要的工作。但我需要在 flex-item 类中添加overflow: scroll。

添加后，它不起作用。如何解决？

【问题讨论】：

标签： html css flexbox

【解决方案1】：

如果您希望 Div 01 和 Div 03 宽度相同，那么flex: 1 auto 不是一个可靠的工具。 flex-grow: 1 组件将根据容器中的可用空间调整弹性项目的大小，这可能会有所不同。您需要为flex-item 类定义一个宽度。

要让弹性项目垂直滚动，您需要指定height 或flex-basis（当flex-direction 为column 时）。

要让弹性项目水平滚动，您需要指定width 或flex-basis（当flex-direction 为row 时）。您还需要添加white-space: nowrap。

.flex-container {
    display: flex;
    width: 1000px;
}

.flex-item {
    /* flex: 1 auto; */
    flex: 0 0 350px;
    overflow-x: scroll;
    white-space: nowrap;
    background: red;
    height: 400px;
}

.middle {
    /* width: 300px; */
    flex: 0 0 300px;
    background: aqua;
    height: 400px;
}

<div class="flex-container">
  <div class="flex-item">This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text.</div>
  <div class="middle">sd</div>
  <div class="flex-item">sd</div>
</div>

【讨论】：

【解决方案2】：

当您使用 flexbox 时，您的所有 div 都需要在 flex 流中。

所以你最好使用flex: 1 1 300px 而不是width: 300px

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

.flex-item {
  background:red;
  flex: 1 1 0px;
  height: 200px;
  overflow: scroll;
}

.middle {
  background:blue;
  flex: 1 1 300px;
}

<div class="flex-container">
  <div class="flex-item">
   This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text.
  </div>
  <div class="middle">sd</div>
  <div class="flex-item">sd</div>
</div>

【讨论】：

【解决方案3】：

这个fiddle可以帮助你！要使overflow:scroll 工作，请使用以下属性：

flex-grow: 1;
flex-basis:0;

【讨论】：