我有三個div:

Div 01 Div 02 -固定寬度300像素 Div 03 Div 01和Div 03的寬度應該相同。

示例:

如果視口是1000像素，Div 01寬度= 350像素，Div 03寬度= 350像素， 如果視口為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>

如果你希望Div 01和Div 03寬度相同，那么flex: 1 auto不是一個可靠的工具。flex-grow: 1組件將根據容器中的可用空間調整flex項的大小，這可能會有所不同。您需要為彈性項目分類定義一個寬度。

對于垂直滾動的伸縮項目，您需要指定高度或伸縮基準(當伸縮方向為列時)。

對于水平滾動的伸縮項，您需要指定寬度或伸縮基準(當伸縮方向為行時)。您還需要添加空白: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>

這把小提琴可以幫助你！ 要使溢出:滾動工作，請使用以下屬性:

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

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

所以你最好使用flex:11300像素而不是width:300像素

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

這與上述問題的答案無關，我也有類似的問題，滾動條不可見，原因是justify-content: flex-end，一旦我刪除它，代碼就可以正常工作。謝謝你