Гибкий элемент выходит за границы гибкого контейнера

У меня есть гибкий контейнер, в котором для 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/

html css flexbox

23.07.2024 14:08

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Сделайте свой .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>

Кажется, в вашем примере чего-то не хватает. Вы его запускали?

— 23.07.2024 22:28

Не могли бы вы помочь мне понять, почему min-height: 0 решает эту проблему?

— 24.07.2024 09:35

stackoverflow.com/questions/36247140/…

— 24.07.2024 11:26

23.07.2024 14:19

Немного улучшен ответ @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>

23.07.2024 22:42

Другие вопросы по теме

Анимация индикатора выполнения в виде пунктирной линии

Применять пользовательскую проверку Bootstrap только к недопустимым полям

Как зафиксировать Div в середине экрана, но только в X-Plane?

HTML-файл. Не удалось загрузить ресурс: net::ERR_FAILED

Как скрыть определенные поля из быстрого редактирования продуктов администратора WooCommerce

Одновременно несвязанные изменения CSS влияют на значение window.innerWidth и window.innerHeight в Chrome

Как обеспечить, чтобы изображение помещалось в контейнер, не перекрывая поле ввода, независимо от его размера

Выравнивание положений вертикальной прокрутки связанных деталей между основным блоком и желобом

Поместите ребенка поверх штабелируемых секций

Центрирование всего основного элемента

Гибкий элемент выходит за границы гибкого контейнера

Ответы 2

Другие вопросы по теме

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