Не удается сделать содержимое блока адаптивным по высоте

Question

Высота блока class='pl', принимает максимальную высоту в 90% от высоты экрана пользвателя. Но блок 'video' выходит за рамки. Высота 100%, ширина также . Ставиш одно работает, перестает работать другое. Хелпс

* {
    position: relative;
    padding: 0;
    margin: 0;
    outline: none;
    letter-spacing: 1px;
    box-sizing: border-box;
}

.m_bl {
    --padding:clamp(10px, 2%, 20px);
    --paddingm:clamp(-10px, -2%, -20px);
    display: grid;
    grid-template-columns: 1fr max(200px, 30%);
    grid-template-rows: minmax(1px, 90%) 1fr;
    align-items: start;
    grid-template-areas: 'pl rk' 'cn rk';
    padding:var(--padding);
    gap:var(--padding);

 }

 .pl {
    max-height: 90%;
    background: gold;
    grid-area: pl;
 }
 .content {
    height: 100px;
    background: red;
    grid-area: cn;
 }
 .rk {
    height: 800px;
    background: green;
     grid-area: rk;
 }

 video {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 100%;
 }
 body {
    height: 100vh;
 }

<body>
    <div class='m_bl'>
        <div class='pl'>
            <video  poster="https://s1.1zoom.ru/big0/846/Dogs_Glance_Tongue_Australian_Shepherd_530653_1280x853.jpg"></video>
        </div>
        <div class='content'></div>
        <div class='rk'></div>
    </div>
</body>

На скрине красным квадратом отвечены границы блока class='pl'. Но блок video, выходит за них. То есть как выполнить так, чтобы при достижении максимальной высоты родителя. Блок vidеo прекратил маштабировтаься....

Answer 1

Укажите явную высоту

.pl {
  height: 100%;
  max-height: 90%;
}

* {
    position: relative;
    padding: 0;
    margin: 0;
    outline: none;
    letter-spacing: 1px;
    box-sizing: border-box;
}

.m_bl {
    --padding:clamp(10px, 2%, 20px);
    --paddingm:clamp(-10px, -2%, -20px);
    display: grid;
    grid-template-columns: 1fr max(200px, 30%);
    grid-template-rows: minmax(1px, 90%) 1fr;
    align-items: start;
    grid-template-areas: 'pl rk' 'cn rk';
    padding:var(--padding);
    gap:var(--padding);

 }

 .pl {
    max-height: 90%;
    height: 100%;
    background: gold;
    grid-area: pl;
 }
 .content {
    height: 100px;
    background: red;
    grid-area: cn;
 }
 .rk {
    height: 800px;
    background: green;
     grid-area: rk;
 }

 video {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 100%;
 }
 body {
    height: 100vh;
 }

<body>
    <div class='m_bl'>
        <div class='pl'>
            <video  poster="https://s1.1zoom.ru/big0/846/Dogs_Glance_Tongue_Australian_Shepherd_530653_1280x853.jpg"></video>
        </div>
        <div class='content'></div>
        <div class='rk'></div>
    </div>
</body>

Answer 2

* {
    padding: 0;
    margin: 0;
    outline: none;
    letter-spacing: 1px;
    box-sizing: border-box;
}

body {
    height: 100vh;
 }

.m_bl {
    --padding:clamp(10px, 2%, 20px);
    --paddingm:clamp(-10px, -2%, -20px);
    display: grid;
    grid-template-columns: 1fr max(200px, 30%);
    grid-template-rows: minmax(1px, 90%) 1fr;
    align-items: start;
    grid-template-areas: 'pl rk' 'cn rk';
    padding:var(--padding);
    gap:var(--padding);

 }

 .pl {
    height: 90%;
    background: gold;
    grid-area: pl;
 }
 .content {
    height: 100px;
    background: red;
    grid-area: cn;
 }
 .rk {
    height: 800px;
    background: green;
     grid-area: rk;
 }

 video {
    width: 100%;
    max-height: 100%;
    margin: 0 auto;
    object-fit: cover;
 }

  <div class='m_bl'>
    <div class='pl'>
        <video  poster="https://n1s1.elle.ru/48/7b/36/487b36300c62c5f0cb905da52aa874b4/728x486_1_30b570c2f6c0da65bb56095068e05768@940x627_0xc0a839a4_18087198581488362059.jpeg"></video>
    </div>
    <div class='content'></div>
    <div class='rk'></div>
</div>

Свойство object-fit определяет, как содержимое заменяемого элемента, такого как <img> или <video>, должно заполнять контейнер относительно его высоты и ширины

БЛОГ НА HUSL

Не удается сделать содержимое блока адаптивным по высоте

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