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

Question

我有三个 div：

• 01 分部
• Div 02 - 固定宽度 300px
• 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>

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

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

Answer 1

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

要使 flex 项目垂直滚动，您需要指定 a heightor flex-basis(when flex-directionis column)。

要使 flex 项目水平滚动，您需要指定widthor flex-basis(when flex-directionis 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>

Answer 2

这个小提琴可以帮助你！要进行overflow:scroll工作，请使用以下属性：

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