Popup is overflowing with overflow: auto, I don't get why

January 13, 2023

I know questions like that have been asked a few thousand times, but this thing drives me crazy.
I’m trying to create a simple popup, the height of the child is set, if I set the height of the titlebar, it changes nothing.

Hope someone can help me with this, so I don’t need to smash my keyboard today.

Thank you.

Screenshot

html {
  height: 100vh;
}

#popup-window {
  position: absolute;
  ;
  height: 50%;
  width: 50%;
  background-color: #50ed77;
  border: 1px solid #3E3B3B;
  border-radius: 5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 800px;
  z-index: 2;
  -webkit-box-shadow: 2px 2px #000;
  box-shadow: 2px 2px #000;
}

#popup-window-titlebar {
  background-color: #21522d;
  color: white;
  padding: 10px;
  font-weight: bold;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#popup-window-inner {
  margin: 5px;
  max-height: 100%;
  height: 100%;
}

#popup-window-list {
  margin: 5px;
  padding: 10px;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow-y: auto;
}

.window-close-btn {
  float: right;
  color: #fff;
  font-weight: bold;
  transition-duration: .5s;
}

.window-close-btn:hover {
  cursor: pointer;
  color: #ff115c;
}

<div id="popup-window">
  <div id="popup-window-titlebar">
    <b>Funny Title</b>
    <div class="window-close-btn">
      X
    </div>
  </div>
  <div id="popup-window-inner">
    <div id="popup-window-list">
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
    </div>
  </div>
</div>

Want to fix the overflow. Googled for 2 hours now and tried different attributes (position, height…)

>Solution :

I would make your popup window flex with a direction of column, then you can make the inner flex grow (to take the remaining height of the popup after the title).

If you then make the inner relative, you can absolutely position your scroll div to fill the inner and then your overflow should work:

html {
  height: 100vh;
}

#popup-window {
  position: absolute;
  height: 50%;
  width: 50%;
  background-color: #50ed77;
  border: 1px solid #3E3B3B;
  border-radius: 5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 800px;
  z-index: 2;
  -webkit-box-shadow: 2px 2px #000;
  box-shadow: 2px 2px #000;
  display:flex;                 /* make this flex with a direction of column */
  flex-direction:column;
}

#popup-window-titlebar {
  background-color: #21522d;
  color: white;
  padding: 10px;
  font-weight: bold;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#popup-window-inner {
  margin: 5px;
  flex-grow: 1;          /* make this grow to fill remaining space and also relative */
  position:relative;
}

#popup-window-list {
  position:absolute;   /* absolutely position this to fill inner - 5px below replaces your margin */
  top:5px;
  left:5px;
  right:5px;
  bottom:5px;
  padding: 10px;
  overflow-y: auto;
}

.window-close-btn {
  float: right;
  color: #fff;
  font-weight: bold;
  transition-duration: .5s;
}

.window-close-btn:hover {
  cursor: pointer;
  color: #ff115c;
}

<div id="popup-window">
  <div id="popup-window-titlebar">
    <b>Funny Title</b>
    <div class="window-close-btn">
      X
    </div>
  </div>
  <div id="popup-window-inner">
    <div id="popup-window-list">
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
      <div>Entry</div>
    </div>
  </div>
</div>