@ikerya

Как растянуть дочерний элемент на всю высоту родителя (2)?

Нужно растянуть блок с цифрой 1 на такую же высоту, как и блок, содержащий цифры 2, 3 и 4.

Если ставлю .label высоту 100% -- блок некорректно растягивается, получая дополнительную, ненужную высоту.

.list {
  display: flex;
}

.parent {
  flex-grow: 1;
}

.label {
  background: #999;
  text-align: center;
}


<div class="list">
  <div class="parent">
    <div class="label">1</div>
  </div>
  <div class="parent">
    <div class="label">2</div>
    <div class="list">
      <div class="parent">
        <div class="label">3</div>
        <div class="list">
          <div class="parent">
            <div class="label">4</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


JSFiddle: https://jsfiddle.net/5qywfm6n/
  • Вопрос задан
  • 67 просмотров
Решения вопроса 1
@RuComMarket
Битрикс FullStack разработчик
.list {
    display: grid;
}

.parent {
    grid-row: 1;
}

.label {
    background: #999;
    text-align: center;
    height: 100%;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
rockfeeler
@rockfeeler
Фронтендер, дизайнер, верстальщик-перфекционист
Ответ написан
@PavelPav
Новичек веб-дизайна
У меня при задании height: 100% .label в первом .parent'е почему-то за рамки выходит блок с цифрой 4, при том что пример такой же как ответ выше.
Можно с помощью флексов: https://jsfiddle.net/r1uwc7qp/
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы