Прокрутка содержимого во вложенных столбцах flexbox (с динамическими высотами)

Question

У меня есть страница с глобальным верхним и нижним колонтитулом (с динамическими высотами) и карта в центре оставшейся области страницы, которая уменьшается или увеличивается в зависимости от содержимого карты.

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

Редактировать: я знаю, что могу добиться этого, задав максимальную высоту содержимого карты, но поскольку все высоты глобального и верхнего и нижнего колонтитулов карты являются динамическими, я понятия не имею, какую максимальную высоту дать в любой момент времени ? Или мне нужно решение javascript для достижения этой цели?

Codepen: https://codepen.io/Yorria/pen/yWaWxg

Скриншот:

Модель:

html,
body {
  padding: 0px;
  margin: 0px;
  background-color: pink;
}

.global-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.card-wrapper {
  flex-direction: row;
  box-sizing: border-box;
  display: flex;
  place-content: center;
  align-items: center;
  flex: 1 1 100%;
  max-height: 100%;
  overflow-y: auto;
}

.card-wrapper-inner {
  flex: 1 1 100%;
  box-sizing: border-box;
  max-width: 70%;
  max-height: 100%;
}

.card {
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: 20px;
}

.card-content {
  flex: 1;
  overflow-y: auto;
  background-color: #ddd;
}


/* ignore: forcing overflow */

.overflow-content {
  height: 2000px;
}

.global-info {
  background-color: green;
  margin: 0px;
  padding: 16px;
  font-size: 20px;
  font-weight: bold;
  color: white;
}

<div class="global-container">
  <div class="global-info">Global Header</div>
  <div class="card-wrapper">
    <div class="card-wrapper-inner">
      <div class="card">
        <div>Card Header</div>
        <div class="card-content">
          <div class="overflow-content">
            I want only this content to scroll, and to shrink if it doesn't take up the entire page.
            <br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec dapibus libero. Cras sollicitudin consectetur nunc, ac faucibus tellus feugiat vel. Morbi sollicitudin, ex eu consectetur pulvinar, nibh elit ullamcorper erat, eu viverra
            sem dui eu orci. Mauris auctor dapibus lectus ac iaculis. Vivamus varius enim non dui porttitor condimentum. Pellentesque euismod massa id imperdiet tincidunt. Mauris imperdiet leo in enim malesuada lacinia. Sed eget porta ligula, nec mollis
            quam. Nullam viverra ex lorem, eget euismod ligula gravida vel. Vestibulum accumsan lacinia consectetur.
          </div>
        </div>
        <div>Card Footer</div>
      </div>
    </div>
  </div>
  <div class="global-info">Global Footer</div>
</div>

Answer 1

Помогите браузеру перейти на полную высоту к контейнерам-потомкам. У них проблемы с прохождением .card-wrapper-inner.

Просто добавьте display: flex к этому классу. Эта команда активирует значение по умолчанию align-items: stretch, которое использует всю доступную высоту от родительского элемента и делает его доступным для дочернего элемента.

Другими словами, в цепи отсутствовало звено. Полные высоты не смогли пройти уровень. Делая .card-wrapper-inner гибким контейнером, правила высоты передаются сверху вниз.

пересмотренный кодекс

html,
body {
  padding: 0px;
  margin: 0px;
  background-color: pink;
}

.global-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.card-wrapper {
  flex-direction: row;
  box-sizing: border-box;
  display: flex;
  place-content: center;
  align-items: center;
  flex: 1 1 100%;
  max-height: 100%;
  overflow-y: auto;
}

.card-wrapper-inner {
  display: flex;  /* new */
  flex: 1 1 100%;
  box-sizing: border-box;
  max-width: 70%;
  max-height: 100%;
}

.card {
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: 20px;
}

.card-content {
  flex: 1;
  overflow-y: auto;
  background-color: #ddd;
}


/* ignore: forcing overflow */

.overflow-content {
  height: 2000px;
}

.global-info {
  background-color: green;
  margin: 0px;
  padding: 16px;
  font-size: 20px;
  font-weight: bold;
  color: white;
}

<div class="global-container">
  <div class="global-info">Global Header</div>
  <div class="card-wrapper">
    <div class="card-wrapper-inner">
      <div class="card">
        <div>Card Header</div>
        <div class="card-content">
          <div class="overflow-content">
            I want only this content to scroll, and to shrink if it doesn't take up the entire page.
            <br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec dapibus libero. Cras sollicitudin consectetur nunc, ac faucibus tellus feugiat vel. Morbi sollicitudin, ex eu consectetur pulvinar, nibh elit ullamcorper erat, eu viverra
            sem dui eu orci. Mauris auctor dapibus lectus ac iaculis. Vivamus varius enim non dui porttitor condimentum. Pellentesque euismod massa id imperdiet tincidunt. Mauris imperdiet leo in enim malesuada lacinia. Sed eget porta ligula, nec mollis
            quam. Nullam viverra ex lorem, eget euismod ligula gravida vel. Vestibulum accumsan lacinia consectetur.
          </div>
        </div>
        <div>Card Footer</div>
      </div>
    </div>
  </div>
  <div class="global-info">Global Footer</div>
</div>

Answer 2

Вы должны установить максимальную высоту для карты div и установить прокрутку содержимого карты

Пример пера здесь: https://codepen.io/anon/pen/xNEoVQ

html,
body {
  padding: 0px;
  margin: 0px;
  background-color: pink;
}

.global-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.card-wrapper {
  flex-direction: row;
  box-sizing: border-box;
  display: flex;
  place-content: center;
  align-items: center;
  flex: 1 1 100%;
  max-height: 100%;
  overflow-y: auto;
}

.card-wrapper-inner {
  flex: 1 1 100%;
  box-sizing: border-box;
  max-width: 70%;
  max-height: 100%;
}

.card {
  display: flex;
  flex-direction: column;
  background-color: white;
  max-height: 70vh;
}

.card-content {
  flex: 1;
  background-color: #ddd;
  overflow: scroll;
  height:50vh;
}

/* ignore: the overflow content itself */
.overflow-content {
  height: 2000px;
}

.global-info {
  background-color: green;
  margin: 0px;
  padding: 16px;
  font-size: 20px;
  font-weight: bold;
  color: white;
}