Question

我有三个div：

Div 01
Div 02 - 固定宽度300px
Div 03

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

示例：

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

添加后，它不起作用。怎么解决？

Answer 1

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

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

要使flex项水平滚动，您需要指定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>

Answer 2

使用flexbox时，所有div都需要在弹性流中。

因此，您最好使用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>

Answer 3

这fiddle可以帮到你！要使@echo off setlocal set first=1 >master.csv.tmp ( for %%F in (*.csv) do ( if defined first ( type "%%F" set "first=" ) else more +1 "%%F" ) ) move /y master.csv.tmp master.csv >nul工作，请使用以下属性：

overflow:scroll

溢出：滚动不适用于flex项目

3 个答案: