the length of scrollbar of flex parent is shorter the length of child

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    [parent] {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100vw;
      height: 100vh;
      display: flex;
      overflow: auto;

      & > [child] {
        flex: 1;
        align-self: center;
        display: flex;
        justify-content: center;
        border: 2px solid green;
        & > [content] {
          max-width: 720px;
          min-width: 400px;
          flex: 1;
          border: 2px solid blue;

          & > header,
          & > main,
          & > footer {
            height: 200px;
            border: 2px solid red;
          }
        }
      }
    }
  </style>
</head>
<body>
  <div parent>
    <div child>
      <div content>
        <header>header</header>
        <main>main</main>
        <footer>footer</footer>
      </div>
    </div>
  </div>
</body>
</html>

i'm trying to make html for popup content considering overflow and scroll.

the problem is the length of scroll-y of the flex parent is shorter than the length of the children of the parent, which makes some part of child invisible when scrollbar appears.

i can't figure out how can i fix this.

Solution

Add size constraints to [parent] like max-width and max-height to prevent it grow larger than viewport.
Set flex-direction to column for [parent] to match the desired content orientation.
Add width: fit-content to [child] and [content] to make them grow when content are too large.

Example

// spam text as normal page content
document.addEventListener("DOMContentLoaded", () => {
  let spam_text =
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim tortor at auctor urna nunc id cursus metus aliquam. Adipiscing commodo elit at imperdiet dui accumsan sit amet. Dictum varius duis at consectetur lorem donec massa sapien. Nec ultrices dui sapien eget mi proin sed libero enim. Volutpat blandit aliquam etiam erat velit. Vestibulum sed arcu non odio euismod lacinia at. Velit scelerisque in dictum non consectetur. Eu sem integer vitae justo. Nibh tellus molestie nunc non blandit massa enim nec.";
  document.getElementById("my-content").textContent = spam_text.repeat(30);
});

.text-grey {
  color: rgb(188, 188, 188);
}


/* popup style */
[parent] {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  max-width: 80vw;
  overflow: auto;
  border: 2px solid yellow;
  &>[child] {
    border: 2px solid green;
    width: fit-content;
    &>[content] {
      border: 2px solid blue;
      width: fit-content;
      &>header,
      &>main,
      &>footer {
        min-width: 120vw;
        min-height: 50vh;
        border: 2px solid red;
      }
    }
  }
}

<!-- content -->
<div id="my-content" class="text-grey"></div>

<!-- popup -->
<div parent>
  <div child>
    <div content>
      <header>header</header>
      <main>main</main>
      <footer>footer</footer>
    </div>
  </div>
</div>