Child is larger than parent with max-height. Overflow has no effect

Question

I want to have a parent element which has a maximum height and a child element which fills this parent element. If the contents of the child are exceeding the parent a scrollbar should appear. I tried to solve it like this:

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

div.child {
  height: 100%;
  overflow-y: auto;
}

<div class="parent">
  <div class="child">
    <div class="some-content">
      abcde<br>abcde<br>abcde<br>abcde<br>abcde<br> abcde
      <br>abcde<br>abcde<br>abcde<br>abcde<br> abcde
      <br>abcde<br>abcde<br>abcde<br>abcde<br> abcde
      <br>abcde<br>abcde<br>abcde<br>abcde<br> abcde
      <br>abcde<br>abcde<br>abcde<br>abcde<br>
    </div>
  </div>
</div>

Unfortunately this does not work as expected. The child grows over the parent.

Please respect, that setting overflow-y: auto to the PARENT is NOT an option, as it is suspected to hold other items that should not be scrolled. The child is suspected to fill the space that is left in the parent. See live DEMO for more information.

Live DEMO

Changing `max-height` to `height` seems to have effect. Don't know if it is what you want... — GreyRoofPigeon, Sep 30 '13 at 11:49
You have to specify the child element's height. Otherwise, overflow won't work. — rgin, Sep 30 '13 at 12:00
This should explain why it isn't working: http://stackoverflow.com/questions/5657964/css-why-doesnt-percentage-height-work As for solutions... either set a specific height to the containing element or use JavaScript. Edit: Setting a specific height to the containing element won't exactly fix the issue either since `100%` will mimic the parent's exact height. — jsea, Sep 30 '13 at 12:00

score 4 · Accepted Answer · answered Sep 30 '13 at 12:03

4

As far as i'm aware there is no easy way to do this with CSS. Essentially you're asking the browser to fill the remaining space with the scrollable element. You can do this with JavaScript (this example uses jQuery because I'm lazy):

$('.parent').each(function(){
    $(this).children('.child').height($(this).height() - $(this).children('.sibling').height()+"px");
});

http://jsfiddle.net/BUxUe/13/

answered Sep 30 '13 at 12:03

Moob

14,420
1
34
47

so very annoying that CSS is not capable of this – zyrup Nov 05 '20 at 04:07

henning · Answer 2 · 2015-10-03T07:02:20.623

1

You can try to use Flexbox.

div.parent {
    max-height: 300px;
    width: 200px;
    border: 1px solid black;
    display: flex;
    flex-direction: column;
}
div.sibling {
    border: 1px solid red;
    flex: 0 0 auto;
}
div.child {
    overflow-y: auto;
    border: 1px solid blue;
    flex: 0 1 auto;
}

I'm not sure, if this is a kind of hack. But it seems to solve this problem.

edited Oct 03 '15 at 07:02

answered Oct 01 '15 at 11:29

henning

29
4

score -2 · Answer 3 · answered Sep 30 '13 at 12:10

-2

Check this out Fiddle

div.parent {
    max-height: 50px;
    width: 100px;

    border: 1px solid black;
    overflow:scroll;
}

div.child {
    height: 100%; 
}

answered Sep 30 '13 at 12:10

rajesh kakawat

10,826
1
21
40

1

OP has already specified that setting the parent to `overflow-y:auto` is not an option. The OP wants to have a scrollable element *within* the parent that fills the *remaining* available height. – Moob Sep 30 '13 at 12:28

Child is larger than parent with max-height. Overflow has no effect

3 Answers3