Сделать высоту заливки, но не увеличивать ее (используйте полосу прокрутки для переполнения)

Question

У меня есть определенный макет, которого я хочу достичь на своей веб-странице, а именно:

Макет на изображении выше построен с использованием следующих классов HTML и загрузчика:

        <div className="ContentWrapper d-flex mh-100 flex-row h-100">
            <div className="ContentBody flex-column flex-fill">
                <div className="ContentHeader p-3 w-100">
                    <h2>Header</h2>
                </div>
                <div className="ContentMain w-100">
                    <h2>Scrollable div, should fill height, but not more than that</h2>
                </div>
            </div>
            <div className="Sidebar h-100">
                <h2>Sidebar content</h2>
            </div>
        </div>

Соответствующий CSS:

.ContentWrapper {
    background-color: red;
}

.ContentBody {
    background-color: blue;
}

.ContentHeader {
    background-color: yellow;
}

.ContentMain {
    background-color: purple;
    flex: 1;
}

.Sidebar {
    background-color: green;
    width: 500px;
}

Однако, когда в пурпурной части слишком много содержимого, высота компонента начинает увеличиваться.Я хочу предотвратить это и иметь полосу прокрутки в фиолетовом компоненте.

Кроме того, я слышал, что некоторые свойства flex работают по-разному в Chrome и Firefox.Идея состоит в том, что я хочу, чтобы моя веб-страница имела одинаковое поведение в обоих браузерах.

Answer 1

Вы можете удалить h-100 на ContentWrapper и добавить height: 100vh к нему.Сделайте ваш ContentBody flexbox, добавив `d-flex-class.Смотрите демо ниже с объяснениями:

.ContentWrapper {
  background-color: red;
  height: 100vh; /* ADDED */
}

.ContentBody {
  background-color: blue;
}

.ContentHeader {
  background-color: yellow;
}

.ContentMain {
  background-color: purple;
  flex: 1;
  overflow-y: auto; /* ADDED */
}

.Sidebar {
  background-color: green;
  width: 500px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="ContentWrapper d-flex mh-100 flex-row"> <!-- removed h-100 class -->
  <div class="ContentBody d-flex flex-column flex-fill"> <!-- added d-flex class -->
    <div class="ContentHeader p-3 w-100">
      <h2>Header</h2>
    </div>
    <div class="ContentMain w-100">
      <h2>Scrollable div, should fill height, but not more than that</h2>
    </div>
  </div>
  <div class="Sidebar h-100">
    <h2>Sidebar content</h2>
  </div>
</div>

Answer 2

Просто найди, уже есть ответ ... Что бы ни положил кодовое поле, я только что закончил, что я считаю более гибким способом.

<div class="ContentWrapper d-flex mh-100 flex-row h-100">
  <div class="ContentBody flex-column flex-fill d-flex">
    <div class="ContentHeader p-3 w-100">
      <h2>Header</h2>
    </div>
    <div class="ContentMain w-100 flex-fill overflow-auto">
      <h2>Scrollable div
    </h2>
    </div>
  </div>
  <div class="Sidebar h-100 flex-shrink-0">
    <h2>Sidebar content</h2>
  </div>
</div>

https://codepen.io/ramseyfeng/pen/drWNYQ