Увеличьте высоту дочернего div до высоты его родительского div

Мои веб-страницы структурированы следующим образом:

И это выглядит так:

Мой link__wrapper CSS выглядит следующим образом:

.link__wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100%;
}

Мой link__infoContainer не расширяется до 100% высоты link__wrapper. Глянь сюда:

Вот мой код link__infoContainer:

.link__infoContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: inherit;
  width: 100%;
  position: inherit;
  min-height: 100%;
}

Как я могу сделать так, чтобы мой link__infoContainer соответствовал высоте моего link__wrapper?

код на скриншоте - очень плохая практика для SO.

— 13.12.2020 19:22

удалить align-items: center из .link__wrapper. потому что link__info Container имеет высоту в %

— 13.12.2020 19:30

html css flexbox height

13.12.2020 19:17

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

434

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

во-первых, убедитесь

html{размер окна: рамка-бокс;}

во-вторых, проверьте код, чтобы увидеть, что div.link_wrapper не наследует поле. если это так, установите маржу на 0%

13.12.2020 19:26

Ответ принят как подходящий

Обновите класс .link__wrapper следующим образом:

.link__wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch; /* "stretch" instead of "center" */
  width: 100%;
  min-height: 100%;
}

Это вытянет детей .link__wrapper на свой рост.

Работала прелесть. спасибо мой парень

— 13.12.2020 20:02

13.12.2020 19:27