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

Question

у меня есть три Дивых'S:

• Div 01
• Div 02 - фиксированная ширина 300px
• Div 03

Div 01 и Див 03 должны быть такой же ширины.

Пример:

• Если окно просмотра является 1000px, Разд 01 ширина = 350 пикселей и Див 03 ширина = 350 пикселей,
• Если окно просмотра является 800px, Разд 01 ширина = 250px и Див 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.

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

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>

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 может помочь вам!

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

Я использую это для выполнения этой работы