Flex child overflowing parent height in modal

Question

I'm trying to build a modal screen using CSS, HTML. Code below:

.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>

As the example shows, the flex child (blue content) is overflowing its parent. I've tried to use min-height: 0 seens not to be working for me. Help apprecited to put the child inside inside its boundaries.

you gave 100% width but you used padding due to which it is overflowing the padding part, similarly, you gave 100% height but there is another div present which is taking some height, and that much height it is overflowing. — Pooja Kushwah, Dec 18 '20 at 18:22
As a note I would probably use `position: fixed; top: 0; bottom: 0; left: 0; right: 0` for the container because `absolute` is relative to its parent: `position: relative` — Mohamed Mufeed, Dec 18 '20 at 18:26
(1) box-sizing:border-box to fix the width issue (first duplicate) (2) you need to fill the remaining height not use height:100% (second and third duplicate) — Temani Afif, Dec 18 '20 at 20:38

s.kuznetsov · Accepted Answer · 2020-12-18T18:20:50.793

Add flex rules to container .content. Like this:

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

Also, remove width: 100% out of .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>

@Mendes, I added a description in the answer. Always happy to help. — s.kuznetsov, Dec 18 '20 at 18:21

Flex child overflowing parent height in modal

1 Answers1