Flex дочерний элемент переполняет родительскую высоту в модальном режиме

Я пытаюсь создать модальный экран с помощью CSS, HTML. Код ниже:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.6);
}

.content {
  border-radius: 4px;
  background-color: white;
  padding: 16px;
  height: 80vh;
  width: 80vw;
}

.title {
  padding: 16px;
}

.body {
  padding: 16px;
  height: 100%;
  width: 100%;
  background-color: blue;
  min-height: 0;
}

<div class = "container">
  <div class = "content">
    <div class = "title">The bugged modal screen</div>
    <div class = "body">
      This is overflowing 
    </div>
  </div>
</div>

Как видно из примера, дочерний элемент flex (синий контент) переполняет родительский элемент. Я пытался использовать min-height: 0 Sees, чтобы не работать на меня. Помощь оценила, чтобы поместить ребенка внутрь в пределах его границ.

Уменьшите высоту и удалите ширину (например: высота: 90%)

— 18.12.2020 19:19

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

— 18.12.2020 19:22

В качестве примечания я бы, вероятно, использовал position: fixed; top: 0; bottom: 0; left: 0; right: 0 для контейнера, потому что absolute относится к его родителю: position: relative

— 18.12.2020 19:26

(1) box-sizing:border-box для исправления проблемы с шириной (первый дубликат) (2) вам нужно заполнить оставшуюся высоту, а не использовать height:100% (второй и третий дубликаты)

— 18.12.2020 21:38

html css

18.12.2020 19:10

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

Раскрытие чувствительных данных

Все внешние компоненты, рассмотренные здесь до сих пор, взаимодействуют с клиентской стороной. Однако, если они подвергаются атаке, они не...

Разница между тегами Br и Wbr в HTML 5

В целом, оба тега <br> и <wbr> имеют свои уникальные цели и функциональные возможности, и их использование зависит от конкретных требований к дизайну...

HTML И VS CODE Для Веб-разработки

Прежде чем начать кодировать html в "VS CODE", мы должны сначала создать папку и назвать ее x.html, здесь я принимаю x как имя файла, который мы...

Как использовать WAI-ARIA

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

Статическая веб-страница, созданная с помощью CSS и HTML - до и не до.

Я потратил некоторое время на создание своего сайта-портфолио. Затем, гордясь собой, я разместил свой код на серверах amazon. Мне потребовалось время,...

437

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

Ответы 1

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

Добавьте flex правила в контейнер .content. Так:

.content {
  ...  
  display: flex;
  flex-direction: column;
}

Кроме того, удалите width: 100% из .body.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.6);
}

.content {
  border-radius: 4px;
  background-color: white;
  padding: 16px;
  height: 80vh;
  width: 80vw;
  
  display: flex;
  flex-direction: column;
}

.title {
  padding: 16px;
}

.body {
  padding: 16px;
  height: 100%;
  /*width: 100%;*/
  background-color: blue;
}

<div class = "container">
  <div class = "content">
    <div class = "title">The bugged modal screen</div>
    <div class = "body">
      This is overflowing 
    </div>
  </div>
</div>

@ Мендес, я добавил описание в ответ. Всегда рад помочь.

— 18.12.2020 19:21

18.12.2020 19:17