У меня есть гибкий контейнер, в котором для flex-direction установлено значение column.
Предположим, есть два гибких элемента, и второй элемент содержит дополнительные контейнеры с текстом.
Я не хочу, чтобы второй гибкий элемент выходил за пределы гибкого контейнера. Вместо этого я хочу отобразить полосу прокрутки для внутреннего контейнера с текстом во втором гибком элементе.
Как добавить полосу прокрутки в контейнер, находящийся внутри гибкого элемента?
.container {
display: flex;
flex-direction: column;
max-width: 200px;
max-height: 100px;
border: 1px solid red;
}
.scrollable{
overflow: auto;
}<div class = "container">
<div class = "container-item">Lorem ipsum</div>
<div class = "container-item">
<div>Lorem, ipsum</div>
<div class = "scrollable"> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </div>
</div>
</div>https://jsfiddle.net/wLm9hd2k/
🤔 А знаете ли вы, что...
HTML5 включает поддержку локального хранилища данных с использованием Web Storage API.
Сделайте свой .container-item гибким столбцом и примените min-height:0.
.container {
display: flex;
flex-direction: column;
max-width: 200px;
max-height: 150px;
border: 1px solid red;
}
.container-item,
div {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.scrollable {
overflow: auto;
}<div class = "container">
<div class = "container-item">Lorem ipsum</div>
<div class = "container-item">
<div>Lorem, ipsum</div>
<div class = "scrollable"> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </div>
</div>
</div>Немного улучшен ответ @Paulie_D, чтобы другие <div> не уменьшались:
.container {
display: flex;
flex-direction: column;
max-width: 200px;
max-height: 150px;
border: 1px solid red;
}
.container-item {
flex: none;
display: flex;
flex-direction: column;
&:has(.scrollable) {
flex: auto;
min-height: 0;
div {
flex: none;
&.scrollable {
flex: auto;
overflow: auto;
}
}
}
}<div class = "container">
<div class = "container-item">Lorem ipsum</div>
<div class = "container-item">
<div>Lorem, ipsum</div>
<div class = "scrollable"> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </div>
</div>
</div>