Reputation: 5034

How to make child div scrollable when it exceeds parent height?

I have 2 child divs nested in a parent div in row-column pattern: the parent is a column, and the children are rows. enter image description here

The upper child div is of variable height, but is guaranteed to be less than the height of the parent div.

The lower child div is also of variable height. In some cases, the heights of the child divs will make the lower child div exceed the parent. In this case, I need to make the lower div scrollable. Note that I want only the lower div to be scrollable, not the whole parent div.

How do I handle this?

See attached jsfiddle for case example: http://jsfiddle.net/0yxnaywu/5/

HTML:

 <div class="parent">
    <div class="child1">
        hello world filler
    </div>
    <div class="child2">
        this div should overflow and scroll down
    </div>
</div>

CSS:

.parent {
    width: 50px;
    height: 100px;
    border: 1px solid black;
}

.child1 {
    background-color: red;
}

.child2 {
    background-color: blue;
}

Upvotes: 55

Answers (6)

Human programmer

Reputation: 504

Since I found this question when I was looking for how to make something similar for a fixed popup, I will mention that since the top answers are using flex and column styling, it makes it hard to use it for such purpose with a close button in the top right corner.

Instead you can simply define parent height (or top and bottom positions) and then use height and overflow properties in a child. This solution will work for BOTH scenarios: the one from top answers and with a popup.

.fixed-parent {
  position: fixed;
  height: 400px;      // specify height or...
  top: 15%;           // alternatively use top and bottom properties
  bottom: 15%;        // alternatively use top and bottom properties
}
.child-on-bottom-of-popup {
  height: 300px;      // specify height
  overflow-y: auto;
}

Here is an example usage with a bit more styling:
https://codepen.io/human_programmer/pen/eYqoVeO

Upvotes: 0

peanutz

Reputation: 516

set child to overflow:scroll and ALL its parents to overflow:hidden

Upvotes: 0

caleb.breckon

Reputation: 1364

Overflow only works when you give it a value to overflow when greater than. Your value is relative to how big the top is, so using jQuery, grab that value then subtract from the parent.

$(document).ready(function() {
  $(".child2").css("max-height", ($(".parent").height()-$(".child1").height()));
});

and add overflow's to the children

.child1 {
    background-color: red;
    overflow: hidden;
}

.child2 {
    background-color: blue;
    overflow: auto;
}

http://jsfiddle.net/m9goxrbk/

Upvotes: 6

Pawel

Reputation: 1718

Because this post is still ranking very high in Google, I'd like to post a better solution using flexbox. Actually this is very simple. Use display: flex, flex-direction: column and overflow: hidden for parent and overflow-y: auto for child.

.wrapper {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.scrollable-child {
  overflow-y: auto;
}

Here's the pen: https://codepen.io/pawelsas/pen/vdwjpj

Upvotes: 140

Anjan Talatam

Reputation: 3996

When you have nested child divs

This solution is to scroll the child div that overflows instead of scrolling the entire parent when divs are nested.

Refer to the attached image. The expected behavior is on the right side ✅

Add the below CSS to all the parent divs ( Parent, Child1, Child2 ) that need to pass the scroll bar down to the scrollable child. ( flex column makes the divs take the available height )

.all-parents {
   display: flex;
   flex-direction: column;
   overflow: auto;
}

The target element that overflows ( Child 3 ) should be assigned overflow: auto to enable scrolling.

.element-that-overflows {
   overflow: auto;
}

Note: You need to specify a fixed height for the topmost parent ( Parent ) to make the child scroll, else the Parent scrolls.

.parent {
  height: 100vh;
}

Open in Stackblitz

Upvotes: 10

antyrat

Reputation: 27765

Use overflow property:

.parent {
    width: 50px;
    height: 100px;
    border: 1px solid black;
    overflow: auto;
}

jsFiddle

EDIT:

if you want only second div to be scrollable, you need to change it height to 30px so child1 and child2 will exactly fit the parent height and add overflow property there:

.parent {
    width: 50px;
    height: 100px;
    border: 1px solid black;
}

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

.child2 {
    height: 30px;
    background-color: blue;
    overflow: auto;
}

jsFiddle

Upvotes: 4

How to make child div scrollable when it exceeds parent height?

Answers (6)

When you have nested child divs

Related Questions