CSS Как мне растянуть дочерний элемент на 100%

Question

HTML

<div class="block">
  <div class="menu"></div>
  <div class="menu2"></div>
</div>

CSS

.block {
  max-width: 300px;
  height: 100vh;
  background: lime;
}
.menu {
  width: 100%;
  padding: 100px 0px;
  background: blue;
}
.menu2 {
  width: 100px;
  height: 100%; /* Неправильно :( */
  background: orange;
}

Как мне растянуть .menu2 так что бы он не выезжал за родительский блок, если высота .menu динамическая зависит от ее контента

Answer 1

У вас ведь точно указана высота контейнера - 100vh. Выдайте такой же height детям, если нужно растянуть на всю длину.
Еще можно использовать height: inherit детям. Тогда они всегда будут наследовать высоту контейнера, если она явно объявлена.
А проценты ни в каком виде не работают в height, как бы ни прискорбно...

БЛОГ НА HUSL

CSS Как мне растянуть дочерний элемент на 100%

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