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

Time：01-13

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

CodePudding user response：

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

CodePudding user response：

add overflow and change height of #popup-window

update style

#popup-window-inner {
    margin: 5px;
    max-height: 100%;
    height: 76%;
    position: relative;
    overflow: hidden;
}

CodePudding user response：

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;
  overflow-y: auto;
}

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

#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%;
}

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

Page link：https//www.codepudding.com/os/671491.html

Prev:Limit the width of <body> but use full width if window is to small
Next:Why Text decoration and navbar are not working?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding