Scrollbar in child div does not apply

user_2733148 0
Viewed 495

I'm reaching out to you...

I have an overlay (containing two divs), that should take as much height as it needs, but not be larger than the screen. If the content is too large, I will need a scrollbar, but I want the scrollbar only for the second div.

HTML

<div class="parent">
  <div class="child1"></div>
  <div class="child2">This div contains a long text, longer than there is space.</div>
</div>

CSS

.parent {
  position: absolute;
  width: 250px;
  max-height: calc(100% - 50px);
  /* overflow-y: auto;*/ -> This would work, but this is not what I want 
}

.child1 {
  width: 100%; -> this is an image that can have different heights
}

.child2 {
  width: 100%;
  overflow-y: auto;
}

JS Fiddle

With all my attempts I only managed to get a scrollbar for the entire parent div, but I only want it for the second div. I'm guessing that the second div does not understand the height of its parent and therefore ignores it. Is there anyone who knows how to solve this?

absolute overlay scrollbar css
2 Answers

Like this? And yes, your parent needs to have a height that the child can understand, in order to use percentage heights. The key in both of these examples below is defining a height on the parent, in CSS, since by default it is set to auto, and that isn't going to let the child elements figure out what they're supposed to be doing.

Also, since your first div is a fixed height of 50px, it's easy to set the lower, scrollable div to a calc value to have it take up 100% of the parent, minus the height of your div above it.

Lastly, I also included a flexbox implementation commented out in the CSS of the example, so take a look at that too and let me know if you have any questions about it!

* {
  box-sizing: border-box;
}

.parent {
  background-color: blue;
  position: absolute;
  border: 2px solid black;
  padding: 5px;
  width: 250px;
  height: 100%;
  max-height: 100vh;
}

.child1 {
  background-color: red;
  height: 50px;
}

.child2 {
  padding: 6px;
  background-color: yellow;
  height: calc(100% - 50px);
  overflow-y: scroll;
}

/*
Here is an implementation using flexbox, as well,
if your browser support allows it
.parent {
  background-color: blue;
  position: absolute;
  border: 2px solid black;
  padding: 5px;
  width: 250px;
  height: 100%;
  max-height: 100vh;
  display: flex;
  flex-direction: column
}

.child1 {
  background-color: red;
  height: 50px;
  flex-shrink: 0;
}

.child2 {
  padding: 6px;
  background-color: yellow;
  overflow-y: scroll;
  flex-grow: 1;
  flex-shrink: 1;
}
*/
<div class="parent">
  <div class="child1"></div>
  <div class="child2">
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
  </div>
</div>

user_41556960

You need to add a height to .parent, even if it's just

height: 100%;

Setting max-height alone is not enough to make the second child scroll.

user_12773780
Related