it-swarm.com.ru

Как растянуть изгиб ребенка, чтобы заполнить высоту контейнера?

Мне нужно растянуть желтого ребенка, чтобы заполнить всю высоту родителя. Без установки родительской высоты. Высота родительского элемента должна зависеть от синего дочернего текста . https://jsfiddle.net/7vaequ1c/1/

<div style='display: flex'>
  <div style='background-color: yellow;height: 100%; width: 20px'>
  </div>
  <div style='background-color: blue'>
  some<br>
  cool<br>
  text
  </div>
</div>

8
Konstantin Vahrushev

При использовании Flexbox основной ошибкой является начало использования height: 100% заново.

Мы привыкли к этому во многих случаях, хотя когда дело доходит до Flexbox, он часто ломает его.

Решение простое, просто удалите height: 100%, и оно будет работать автоматически.

Причиной этого является то, что для flex item in row direction (по умолчанию), align-items контролирует вертикальное поведение, а по умолчанию stretch это просто работает как есть.

Фрагмент стека

<div style='display: flex'>
  <div style='background-color: yellow; width: 20px'>
  </div>
  <div style='background-color: blue'>
  some<br>
  cool<br>
  text
  </div>
</div>

24
LGSon

Если я правильно понял, вы ищете свойство align-items, которое определяет макет вдоль поперечной оси, в данном случае вертикально.

Вы можете найти хороший обзор здесь: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.flexbox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch; // <-- stretch vertical (default value, can be omitted here)
  align-content: center;
}

.box {
    padding: 1em;
    text-align: center;
    margin: 1em;
}

.box--yellow {
  background-color: yellow;
}

.box--blue {
  background-color: blue;
  color: white;
}
<div class="flexbox">
  <div class="box box--yellow">
    yellow
  </div>
  <div class="box box--blue">
    some<br>
    cool<br>
    text
  </div>
</div>

3
Daniel Sixl

<div style='display: flex'>
  <div style='background-color: yellow; width: 20px'>

  </div>
  <div style='background-color: blue'>
    some<br>
    cool<br>
    text
  </div>
</div>

0
kyl