KPC
Kevin Powell - Community•4w ago
ᴋʙ

Need css help with "growing" div upwards.

The goal is having #body push the rest of the content upwards. Is this even possible without js?
https://codepen.io/KB04/pen/EaVZgoG 
* { margin: 0; box-sizing: border-box; }
body { background: #444; padding: 32px; }

#viewbox {
  top: 30%;
  left: 30%;
  position: absolute;
  width: 344px;
  height: 332px;
}

#overlay {
  max-width: 100%;
  max-height: 100%;
  
  position: relative;
  display: grid;

  grid-template-rows: min-content auto;
  border-radius: 12px;
  
  overflow: hidden;
  overflow-y: auto;
  scrollbar-color: #ababab transparent;
  
  font-family: system-ui;
  padding: 16px;
  background: #111;
  color: #eee;
}

#body {
  height: auto ;
  max-height: min-content;
}
* { margin: 0; box-sizing: border-box; }
body { background: #444; padding: 32px; }

#viewbox {
  top: 30%;
  left: 30%;
  position: absolute;
  width: 344px;
  height: 332px;
}

#overlay {
  max-width: 100%;
  max-height: 100%;
  
  position: relative;
  display: grid;

  grid-template-rows: min-content auto;
  border-radius: 12px;
  
  overflow: hidden;
  overflow-y: auto;
  scrollbar-color: #ababab transparent;
  
  font-family: system-ui;
  padding: 16px;
  background: #111;
  color: #eee;
}

#body {
  height: auto ;
  max-height: min-content;
}
KB
CodePen
Help make this grow upwards :)
...
No description
2 Replies
Chris Bolson
Chris Bolson•4w ago
In your #overlay selector, try swapping position: relative; for this: 
position: absolute;
bottom: 0;
position: absolute;
bottom: 0;
ᴋʙ
ᴋʙOP•4w ago
... im ashamed I've tried so many things (very over-complicated things) and that was the solution 😂 Thank you! ❤️

Did you find this page helpful?