Как правильно растянуть средний элемент? (flex)

Question

Какие параметры и куда нужно вписать, чтобы блок "contant" не превышал высоты блока "wrapper", и идеально вписывался по высоте между "header" и "footer", и на его высоту в дальнейшем ровнялся тег <video> в блоке "main-video"?

Код прилагаю:

.wrapper {
    max-height: 100%;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    padding: 2%;
}

.content {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
}

.main-logo{
    height: 100%;
}

.main-logo video{
    height: 100%; 
}

<body>
    <div class="wrapper">
        <div class="header">
            <p>*HEADER*</p>
        </div>
        <div class="content">
            <div class="main-logo">
                <video preload="auto" no-controls autoplay>
                    <source src="***" type="***">
                </video>
            </div>
        </div>
        <footer class="footer">
            <p>*FOOTER*</p>
        </footer>
    </div>
</body>

Answer 1

Для .wrapper укажите высоту height: 100vh; т.е. 100% от высоты вьюпорта.
Так же box-sizing: border-box чтобы padding не "выдавливал" свои 2%.

Для блока видео задайте 100% высоту и ширину, аналогично и для тега video, так же для видео пригодится object-fit: cover, чтобы заполнять блок сохраняя соотношение сторон.

body {
  display: block;
  width: 100%;
  min-height: 100vh;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.wrapper .header {
  width: 100%;
}

.wrapper .content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.wrapper .content .main-video {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.wrapper .content .main-video video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.wrapper .footer {
  width: 100%;
}

<div class="wrapper">
  <div class="header">
    <p>HEADER</p>
  </div>
  <div class="content">
    <div class="main-video">
      <video src="//i.imgur.com/S5zuzDT.mp4" width="1" height="1" autoplay loop muted onloadstart="this.muted=false;this.volume=.25"></video>
    </div>
  </div>
  <div class="footer">
    <p>FOOTER</p>
  </div>
</div>

Answer 2

.wrapper {
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 2%;
}

.content {
    height: 100%;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
}

.main-video, 
.main-video video
.main-logo{
    height: 100%;
}

.main-logo video{
    height: 100%; 
}

<body>
    <div class="wrapper">
        <div class="header">
            <p>*HEADER*</p>
        </div>
        <div class="content">
            <div class="main-video">
                <video preload="auto" no-controls autoplay>
                    <source src="***" type="***">
                </video>
            </div>
        </div>
        <footer class="footer">
            <p>*FOOTER*</p>
        </footer>
    </div>
</body>

БЛОГ НА HUSL

Как правильно растянуть средний элемент? (flex)

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