Flexbox: растянуть/сжать div с картинками на высоту экрана

Question

Имеется набор картинок, заключенный в div-блок:

<div class="container">
    <img src=""...">
    <img src=""...">
    <img src=""...">
    <img src=""...">
</div>

Подключен следующий css:

html, body{
    height:100vh; /* либо же 100%, все равно не работает */
}

.container{
    display:flex;
    flex-direction:column;
    height:100vh; /* либо height:100%, либо flex: 11 auto - ничего из этого не работает */
}

Нужно чтобы весь div блок влезал в экран браузера без скролла. Почему свойство height:100vh; не работает в данном случае?

Answer 1

Скорее всего, проблема в отступах, которые браузер задаёт элементам по умолчанию. В данном случае, это margin у <body>:

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

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 100vh;
}

.container img {
  min-height: 0;
}

<div class="container">
  <img src="https://i.stack.imgur.com/MraLT.jpg">
  <img src="https://i.stack.imgur.com/VxVNC.jpg">
  <img src="https://i.stack.imgur.com/A9VLC.jpg">
  <img src="https://i.stack.imgur.com/oYG0R.jpg">
</div>

БЛОГ НА HUSL

Flexbox: растянуть/сжать div с картинками на высоту экрана

Ответы (1 шт):