Чтобы блок display: flex не вылезал за границы родительского блока при растягивании его содержимого

Рейтинг: 0Ответов: 1Опубликовано: 03.08.2023

Видео плеер находится внутри блока div(.relatVid) с помощью которого на видео позиционируются элементы управления и прочее. Нужно вписать блок div(.relatVid) в div(.videBlock) так, чтобы он растягивался по вертикали и горизонтали по размерам вложенного видео. Но иногда видео с большой высотой растягивают блок div(.relatVid) настолько что он выходит(по вертикали) за пределы родительского div(.videBlock). В этом случае нужно чтобы div вместе с содержимым уменьшался по горизонтали сохраняя пропорции - чтобы никогда не вылезал за пределы div(.videBlock). Как этого добиться?

В общем чтобы div растягивался по содержимому сохраняя пропорции, но никогда не вылазил за пределы родительского?

.videBlock {
  display: block;
  overflow: hidden;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.relatVid {
  display: flex;
  margin-bottom: 0;
  align-items: center;
  justify-content: center;
}

.relatVid>video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  align-self: flex-start;
}
<div class="videBlock">
  <div class="relatVid">
    <video class="myVideo" id="myVideo" controls="controls" src="" poster=""> 
    </video>
  </div>
</div>

css html вёрстка позиционирование
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Если хочется ограничить родительский элемент какой-то высотой, как у вас указано в комментарии, то можно, например, написать так:

.videBlock {
  display: block;
  overflow-y: hidden;
  position: relative;
  max-height: 500px;
  background-color: #ccc;
  padding: 5px;
}

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

.relatVid > video {
  width: 100%;
  height: 100%;
  max-height: 500px;
  object-fit: contain;
  align-self: flex-start;
}
<div class="videBlock">
  <div class="relatVid">
    <video class="myVideo" id="myVideo" controls="controls" src="" poster="">
    </video>
  </div>
</div>

То есть, у селекторов .videBlock и .relatVid > video указываю max-height: 500px;, убираю лишнее, добавляю родителю цвет фона и padding для наглядности. Кроме того, у родителя прописываю явно overflow-y: hidden;. Этого должно быть достаточно.

Другое дело, что растягивать видео на 100% и по ширине, и по высоте - не есть хорошо. Так как сильно могут растянуться пропорции.