Блог

Главная - Вопросы по программированию - align-items: растягивание и align-self: stretch не работают в гибкой строке без фиксированной высоты

align-items: растягивание и align-self: stretch не работают в гибкой строке без фиксированной высоты

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

Я пытаюсь добавить вертикальное правило в гибкую строку, высота которой не фиксирована (ее размер соответствует ее другому содержимому).

Я бы хотел, чтобы вертикальное правило растягивалось на всю высоту контейнера (исключая отступы). Я пробовал align-items: stretch в гибкой строке, align-self: stretch в вертикальном правиле div и height: 100% в вертикальном правиле div, но независимо от того, что я делаю, кажется, что вертикальное правило имеет высоту только 0 пикселей:

 .row {
  display: flex;
  flex-direction: row;
  background-color: orange;
  width: max-content;
  align-items: stretch;
  margin-bottom: 12px;
  padding: 12px;
  height: max-content;
}

.vr {
  height: 100%;
  width: 1px;
  background-color: black;
  align-self: stretch;
}

.purple {
  background-color: purple;
  height: 80px;
  width: 50px;
}

.lightblue {
  background-color: lightblue;
  height: 80px;
  width: 50px;
}

.red {
  background-color: red;
  height: 120px;
  width: 50px;
}

.blue {
  background-color: blue;
  height: 120px;
  width: 50px;
}  
 <div class="row">
  <div class="red"></div>
  <div class="vr"></div>
  <div class="blue"></div>
</div>

<div class="row">
  <div class="purple"></div>
  <div class="vr"></div>
  <div class="lightblue"></div>
</div>

Есть ли какой-нибудь способ, которым я могу растянуть свой .vr div на всю высоту контейнера, не присваивая контейнеру фиксированную высоту?

Ответ №1:

Удаление height: 100% из .vr правил помогло мне.