Как сделать высоту гибкого элемента его родителем?

У меня есть простой макет типа навигации, использующий flex для размещения элементов с разной шириной по горизонтали. Между элементами есть линии, но они разной высоты, потому что содержимое имеет разную высоту.

Как я могу сделать элементы высотой родительского элемента, чтобы все разделительные линии шли вверх родительского элемента.

https://codepen.io/anon/pen/zbEMVd

* {
  font-family: sans-serif;
}

.wrap {
  border: 1px solid grey;
  display: flex;
  padding: 5px;
  justify-content: space-between;
  max-width: 1200px;
}

.item:not(:last-of-type) {
  border-right: 2px solid red;
}

.item-1 {
  width: 150px;
}

.item-2 {
  width: 50px;
}

.item-3 {
  width: 50px;
}

.item-4 {
  width: 50px;
}

.item-5 {
  flex: 1;
}

.item-6 {
  width: 50px;
}

<div class = "wrap">
  <div class = "item item-1">One</div>
  <div class = "item item-2">Two Two Two Two Two </div>
  <div class = "item item-3">Three Three Three</div>
  <div class = "item item-4">Four</div>
  <div class = "item item-5">Five</div>
  <div class = "item item-6">Six</div>
</div>

Удалите align-self из .item и вместо этого добавьте display:flex; align-items: flex-end;.

— 12.03.2019 11:12

html css flexbox alignment

12.03.2019 11:09

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 2

Удалите align-self из .item и вместо этого добавьте display:flex; align-items: flex-end;.

.item{
  display: flex;
  align-items: flex-end;
  /* ... */
}

https://codepen.io/anon/pen/ZPXVra

12.03.2019 11:14

Сделайте элемент itemфлексбокс с обратным столбцом (и удалите из него align-self: flex-end), чтобы получить эффект — см. демонстрацию ниже:

* {
  font-family: sans-serif;
}

.wrap {
  border: 1px solid grey;
  display: flex;
  padding: 5px;
  justify-content: space-between;
  max-width: 1200px;
}

.item {
  /* align-self: flex-end; */
  display: flex; /* ADDED */
  flex-direction: column-reverse; /* ADDED */
  background: #ddd;
}
.item:not(:last-of-type) {
  border-right: 2px solid red;
}

.item-1 {
  width: 150px;
}

.item-2 {
  width: 50px;
}

.item-3 {
  width: 50px;
}

.item-4 {
  width: 50px;
}

.item-5 {
  flex: 1;
}

.item-6 {
  width: 50px;
}

<div class = "wrap">
  <div class = "item item-1">One</div>
  <div class = "item item-2">Two Two Two Two Two  </div>
  <div class = "item item-3">Three Three Three</div>
  <div class = "item item-4">Four</div>
  <div class = "item item-5">Five</div>
  <div class = "item item-6">Six</div>
</div>

@cdmt, не могли бы вы проголосовать / принять ответы на этот вопрос и закрыть вопрос, спасибо!

— 21.03.2019 03:01

12.03.2019 11:18