Предотвращение роста flex PARENT без переполнения: скрыто

Question

Слишком много информации о том, как предотвратить рост сгибающего ребенка, но слишком сложно найти способ предотвратить рост сгибающего ребенка (из-за ребенка).

Рассмотрим схему ниже:

• Высота и ширина внешнего элемента фиксированы (возможно для собственных приложений)
• Верхний и нижний колонтитулы не растут и не уменьшаются. Кроме того, нижний колонтитул всегда находится внизу.
• Основное содержимое (между верхним и нижним колонтитулами) занимает все доступное пространство.
• Основное содержимое НЕ прокручивается.
  • Но внутренние элементы можно прокручивать. Например вид прокрутки под заголовком раздела:

Исходное решение:

.layout {
  display: flex;
  flex-direction: column;
  width: 640px;
  height: 300px;
  background: rgba(220, 20, 60, 0.2);
}

.header {
  flex: 0 0 auto;
  padding: 4px 8px;
  background: rgba(220, 20, 60, 0.2);
}

.content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 4px 8px;
  background: rgba(255, 69, 0, 0.2);
  overflow-y: hidden;
}

.title {
  flex: 0 0 auto;
  background: rgba(255, 255, 0, 0.2);
}

.splitView {
  display: flex;
  flex: 1 1 auto;
  background: rgba(0, 128, 128, 0.2);
  overflow-y: hidden;
}

.splitView-section {
  display: flex;
  flex-direction: column;
  flex: 1 1 50%;
}

.splitView-section:first-child {
  background: rgba(0, 191, 255, 0.2);
}

.splitView-section:last-child {
  background: rgba(0, 0, 255, 0.2);
}

.scrollView {
  flex: 1 1 auto;
  background: rgba(165, 42, 42, 0.2);
  overflow-y: auto;
}

.veryBigElement {
  background: #CD5C5C;
  width: 50px;
  height: 500px;
  box-shadow: rgba(0, 0, 0, 0.25) 0 0 6px
}

.footer {
  flex: 0 0 auto;
  padding: 4px 8px;
  background: rgba(173, 255, 47, 0.2);
}

<div class="layout">
  <div class="header">I am header</div>
  <div class="content">
    <div class="title">Title</div>
    <div class="splitView">
      <div class="splitView-section">
        <div class="sectionTitle">Section title</div>
        <div class="scrollView">
          <div class="veryBigElement"></div>
        </div>
      </div>
      <div class="splitView-section"></div>
    </div>
  </div>
  <div class="footer">I am footer</div>
</div>

• Высота и ширина внешнего элемента фиксированы : пусть это будет width: 640px и height: 300px;, например.
• Верхний и нижний колонтитулы не растут и не уменьшаются. flex: 0 0 auto для верхнего и нижнего колонтитула.
• Основное содержимое (между верхним и нижним колонтитулами) занимает все доступное пространство. flex: 1 1 auto.
• Также нижний колонтитул всегда находится внизу. Нижний колонтитул не нуждается в margin-top: auto, потому что он прижимается к основному содержанию.
• Основной контент НЕ прокручивается. По умолчанию не будет.
• Но внутренние элементы можно прокручивать. overflow-y: auto для просмотра с прокруткой.

Это работает. Но есть одна проблема: если мы добавим некоторые элементы с тенями (например, карты для просмотра с прокруткой), из-за overflow-y: hidden для .splitView и .content, мы не увидим часть этого. Например Если добавить box-shadow: rgba(black, 0.25) 0 0 6px для .veryBigElement, мы видим просто:

Таким образом, в зависимости от конструкции, вышеупомянутое решение не может быть использовано. Если мы удалим overflow-y: hidden из .splitView и .content, splitView-section будет расти независимо от overflow-y: auto для .scrollView.

Обратите внимание:

• Мы не знаем ни высоты заголовка, ни высоты нижнего колонтитула (предположим, что его содержимое является динамическим).
• Мы не можем вычислить высоту .scrollView, даже высоту splitView: в реальном приложении может быть много содержимого вместо '.title'.

JSFiddle: https://jsfiddle.net/teyqkrh8/

Answer 1

Вы можете удалить «overflow-y: hidden» и добавить «height: 100%» к .splitView и -section.

.splitView{
    display: flex
    flex: 1 1 auto
    background: rgba(#008080, 0.2)
    height: 100%
    &-section{  
        display: flex
        flex-direction: column
        flex: 1 1 50%
        height: 100%
    }
}

Поскольку высота родительского div установлена, дочерние divунаследует эту высоту.

https://codepen.io/salixdubois/pen/JQLaRE

Answer 2

Если вы задали высоту " veryBigElement " 500 пикселей и хотите, чтобы основное содержимое не прокручивалось, можно прокручивать только внутренние элементы.Таким образом, вы должны добавить MAX-HEIGHT из VeryBigElement parent .Если вы удалите overflow-y: hidden, то splitView-раздел не будет расти.