Заставить гибких детей не растягиваться (но внутри абсолютного родителя)? - PullRequest
Новая
       16

Заставить гибких детей не растягиваться (но внутри абсолютного родителя)?

1 голос
/ 21 марта 2019

Как я могу остановить растяжение <li> элементов, чтобы заполнить высоту своего гибкого контейнера? я просто хочу, чтобы фон растягивался, а предметы находились в верхней части окна.

Я знаю, что вы обычно используете align-items: flex-start, но это не работает, так как родитель div абсолютно позиционирован.

Мне нужно сохранить абсолютное позиционирование для части макета, не связанной с этим вопросом. 

div {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

ul {
  align-items: flex-start;
  background: gold;
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
}

li {
  flex-basis: 50%;
}
<div>
<h1>hello</h1>
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>

1 Ответ

1 голос
/ 21 марта 2019

Добавьте align-content: flex-start к ul (чтобы выровнять flex line , когда вы оборачиваете flexbox, вы должны использовать свойство align-content) - см. Демонстрацию ниже: 

div {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

ul {
  align-items: flex-start;
  background: gold;
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  align-content: flex-start; /* added */
}

li {
  flex-basis: 50%;
}
<div>
<h1>hello</h1>
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
...