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

Question

我有三个 div：

• 分区 01
• Div 02 - 固定宽度 300px
• 分区 03

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

例子：

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

 .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 类。

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

原文由 nimal_sadu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

For the flex items to scroll vertically, you need to specify a height or flex-basis (when flex-direction is column ).

For the flex items to scroll horizontally, you need to specify width or flex-basis (when flex-direction is 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>

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

原文由 Alejandro Garrido 发布，翻译遵循 CC BY-SA 4.0 许可协议