Почему при направлении row высота элементов остается неизменной?

Question

Вот скрин проблемы, элемент тест хоть и имеет заданную высоту меньше половины - как элемент flex-а занимает ровно половину и gallery к нему не прижимается вниз.

При выравнивании stretch - так же высота остается половина, независимо от того какая задана : CSS рродителя такое:

.wrapper {
    height: 100px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap
}

у вложенных элементов - только задання высота у элемента test

Подсажите как в данном случае убрать фиксированную высоту в половину элемента?

html соответственно

gallery test

Answer 1

Такой вариант:

* {
  box-sizing: border-box;
}

.wrapper {
    height: 100px;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    align-content: center;
  
  border:1px solid;
}

.test {
  background: lime;
  height: 30px;
  line-height: 30px;
  padding: 0rem 1rem;
  
  margin-top: auto;
}

.gallery {
  background: yellow;
  padding: 0 1rem;
  width: 100%;
}

<div class="wrapper">
  <div class="test">test</div>
  <div class="gallery">gallery</div>
</div>

Answer 2

Высота остается фиксированной потому что эмелемны растягиваются на всю высоту flex , которая задана.
Чтоб так не происходило, ннадо убрать height у flex, тогда height у элементов не будет игнорироваться

* {
  box-sizing: border-box;
}

.wrapper {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    align-content: center;
  
  border:1px solid;
}

.test {
  background: lime;
  height: 50px;
  line-height: 30px;
  padding: 0rem 1rem;
  
  margin-top: auto;
}

.gallery {
  background: yellow;
  padding: 0 1rem;
  width: 100%;
  height: 20px;
}

<div class="wrapper">
  <div class="test">test</div>
  <div class="gallery">gallery</div>
</div>

БЛОГ НА HUSL

Почему при направлении row высота элементов остается неизменной?

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