Flex отрезает дочерние элементы

Question

У меня следующая структура кода

.parent {
  display: flex;
  flex-direction: column;
}

.img {
  width: 100%
}

.content {
  flex: 1;
  overflow-y: scroll;
}
.container {
  border: 1px solid;
  display: flex;
  flex-direction:column;
  margin:20px;
}

<div class="parent">
  <img src="https://www.everythingcarers.org.au/media/1982/sample.jpg"/>
  <div class="content">
  </div>
  <div class="footer">
    <div class="container">
       <div><button>Button1</button><div>
       <div><button>Button2</button><div>
    </div>
  </div>
</div>

Мне нужно, чтобы нижний колонтитул занимал свою первоначальную ширину и высоту (высота: 144 пикселя) и делал прокрутку содержимого на основе доступного пространства в соответствии с экраном.В настоящее время нижний колонтитул отключается на некоторых экранах.Я пытался изменить значения flex для содержимого и нижнего колонтитула, но это не работает. Спасибо

Answer 1

Если вы хотите ограничить родительский элемент высотой экрана, чтобы нижний колонтитул всегда был виден, вам нужно установить высоту 100% для вашего div (и body и html), а также переместить изображение внутри контейнера содержимого (или иметь отдельный, который будет прокручиваться, если он слишком велик для экрана)

body,
html {
  margin: 0;
  height: 100%;
}

.parent {
  height: 100%;
  display: flex;
  flex-direction: column;
}

img {
  display:block;
  width: 100%
}

.content {
  flex: 1;
  overflow-y: scroll;
}

.container {
  border: 1px solid;
  display: flex;
  flex-direction: column;
  margin: 20px;
}

<div class="parent">
  <div class="content">
    <img src="https://www.everythingcarers.org.au/media/1982/sample.jpg" />
  </div>
  <div class="footer">
    <div class="container">
      <div><button> Button1 </button></div>
      <div><button> Button2 </button></div>
    </div>
  </div>
</div>

Answer 2

Я думаю, что установление высоты вашего родителя на 100vh и установление фиксированной высоты для нижнего колонтитула должно исправить это:

https://codepen.io/chrishalley/pen/zbwRMw

    body {
  margin: 0;  
}

.parent {
  display:flex;
  flex-direction:column;
  background-color: orangered;
  height: 100vh;
}

.content {
  flex: 1;
  overflow-y: scroll;
}

img {
  width: 300px;
}

.footer {
  height: 144px;
}