переполнение: прокрутка не работает для гибких элементов

Question

У меня есть три 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>

Это работает так, как я хочу. Но мне нужно добавить overflow: scroll в класс гибких элементов.

После добавления этого не работает. Как это решить?

html css flexbox

5

nimal_sadu 25 Май 2016 в 19:18

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

9

Michael Benjamin 30 Май 2016 в 19:19

Answer 2

Эта скрипка может вам помочь! Чтобы заставить overflow:scroll работать, используйте следующие атрибуты:

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

-2

Alaa 17 Дек 2018 в 01:00

Answer 3

Когда вы используете 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>

0

glevoux 25 Май 2016 в 16:52

переполнение: прокрутка не работает для гибких элементов

3 ответа

Похожие вопросы

Новые вопросы

html