Контент не прокручивается

Я пытаюсь гарантировать, что содержимое внутри left-content div прокручивается, когда содержимое превышает родительскую высоту.

Однако по какой-то причине прокручиваемый контент превышает высоту родительского элемента.

.main-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: red;
}

.content-container {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
}

.content-container>div {
  flex: 1;
}

.content-left {
  overflow: scroll;
}

.scrolling-content {
  height: 1000px;
  background-color: yellow;
}

<div class = "main-container">
  <div>Navgation</div>
  <div>Notification Bar</div>
  <div class = "content-container">
    <div class = "content-left">
      <div class = "scrolling-content">Scrolling Content</div>
    </div>
    <div class = "content-right">2</div>
  </div>
  <div>Footer</div>
</div>

Я создал скрипт, чтобы продемонстрировать свою проблему: https://jsfiddle.net/Lqpnacv7/

на скрипке, которой вы поделились, левый контент - это правильный контент, какому коду мы должны доверять? Сделайте свой снайпер, чтобы мы могли играть с ним прямо в

— 12.07.2024 14:46

html css flexbox

12.07.2024 14:33

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

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

Ответы 3

Ваша проблема в том, что содержимое выходит за пределы контейнера, но у контейнера нет фиксированной высоты. Таким образом, контейнер не переполняется: контейнер переполняет родительский элемент. Глядя на следующий фрагмент, основной контейнер отмечен переполнением: скрыт, чтобы доказать, что желтый контейнер обрезается.

  .main-container{
        height: 100vh;
        display: flex;
        flex-direction: column;
        background-color: red;
        overflow: hidden;
    }

.content-container{
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
}
.content-container > div{
    flex:1;
}
.content-left{
    overflow: scroll;
}
.scrolling-content{
    height: 1000px;
    background-color: yellow;
}

      <div class = "main-container">
          <div>Navgation</div>
          <div>Notification Bar</div>
          <div class = "content-container">
            <div class = "content-left">
              <div class = "scrolling-content">Scrolling Content</div>
            </div>
            <div class = "content-right">2</div>
          </div>
          <div>Footer</div>
    </div>

Вот исправление:

.main-container{
      height: 100vh;
      display: flex;
      flex-direction: column;
      background-color: red;
  }

.content-container{
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    height: 100%;
}
.content-container > div{
    flex:1;
}
.content-left{
    overflow-y: scroll;
    height: fit-content;
}
.scrolling-content{
    height: 1000px;
    background-color: yellow;
}

<div class = "main-container">
          <div>Navgation</div>
          <div>Notification Bar</div>
          <div class = "content-container">
            <div class = "content-left">
              <div class = "scrolling-content">Scrolling Content</div>
            </div>
            <div class = "content-right">2</div>
          </div>
          <div>Footer</div>
    </div>

нет ли способа добиться этого, не задавая фиксированную высоту, в идеале я бы хотел, чтобы левый контент заполнял оставшееся пространство?

— 12.07.2024 15:06

Я отредактировал первый фрагмент, но можно было бы установить фиксированную высоту, как я лениво сделал height: 100%

— 12.07.2024 15:11

12.07.2024 14:55

Вам нужно определить height для всех родительских контейнеров и самого левого контейнера, как в моем примере ниже. В противном случае содержимое родительских контейнеров будет адаптироваться к высоте их содержимого, то есть их дочерних контейнеров.

Кроме того, используйте не overflow: scroll, а overflow: auto, иначе вы всегда получите и вертикальную, и горизонтальную полосу прокрутки, даже если она не нужна.

.main-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: red;
}

.content-container {
  height: calc(100% - 2.4em);
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
}

.content-container>div {
  flex: 1;
}

.content-left {
  height: 100%;
  overflow: auto;
}

.scrolling-content {
  height: 1000px;
  background-color: yellow;
}

<div class = "main-container">
  <div>Navgation</div>
  <div>Notification Bar</div>
  <div class = "content-container">
    <div class = "content-left">
      <div class = "scrolling-content">Scrolling Content</div>
    </div>
    <div class = "content-right">2</div>
  </div>
  <div>Footer</div>
</div>

12.07.2024 15:23

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

Добавьте .content-container { min-height: 0; } для уменьшения:

body {
  margin: 0;
}

.main-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: red;
}

.content-container {
  display: flex;
  min-height: 0;
}

.content-container>div {
  flex: 1;
}

.content-left {
  overflow-y: scroll;
}

.scrolling-content {
  height: 1000px;
  background-color: yellow;
}

<div class = "main-container">
  <div>Navgation</div>
  <div>Notification Bar</div>
  <div class = "content-container">
    <div class = "content-left">
      <div class = "scrolling-content">Scrolling Content</div>
    </div>
    <div class = "content-right">2</div>
  </div>
  <div>Footer</div>
</div>

12.07.2024 22:48

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

Фильтрация флажков и таблиц с использованием Javascript

Исправление прозрачной линии между Div с помощью Clip-Path и родительским Div

Как предотвратить прокрутку # href вниз до раздела/идентификатора страницы, но при этом использовать :target для других действий

Есть ли способ сделать визуальный эффект цветов линейного градиента в SVG и CSS одинаковым?

Bootstrap 5 Адаптивный макет карточек/сеток/столбцов, как это сделать?

Пользовательская точность переключателя

Расширьте/измените размер элемента div с помощью событий касания JavaScript

Как убрать контур

Как установить цвет фона выделенного текста виджета GtkText с помощью CSS?

Как сделать переполнение флексбокса и возможность прокрутки?

Контент не прокручивается

Ответы 3

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

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