Set max-height in inner div does not work

Question

I got a div which is totally centered (itemSoldOutView). Inside this div there is another div (itemSoldOutViewContent) which should have a max-height of 90% of the parent div. So that if the content gets too much it gets scrolling (Attention: ONLY the inner CONTENT-div should get scrolling). But this does not work. How can I set the height correct?

Here is my code (JSFIDDLE):

#shadow { 
    position:fixed; 
    left:0; 
    top:0; 
    width:100%; 
    height:100%;
    background: darkgray;
    z-index:2;
}

#itemSoldOutView {
    background: white;
    position: absolute;
    padding: 15px;
    max-height: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#itemSoldOutViewContent {
    overflow: auto;
  max-height: 90%;
}

#itemSoldOutViewCancel {
    position: fixed;
    right: 5px;
    top: 5px;
    width: 16px;
    height: 16px;
    background: red;
}

<div id="shadow">
    <div id="itemSoldOutView">
        <div id="itemSoldOutViewTitle">
            <div id="itemSoldOutViewCancel"></div>
            <h3>This is the title text:</h3>
        </div>
        <div id="itemSoldOutViewContent">
            // much content
        </div>
    </div>
</div>

Actually it is working, but you're failing to take into account the fact that the inner DIV doesn't start at the top of its parent DIV, it starts further down, because of the title text. So what you really want the inner DIV to do is occupy 90% of the height - the computed height of the title text, plus any padding/margin involved above the inner DIV. — Mitya, Apr 07 '18 at 11:43

mpro · Answer 1 · 2018-04-07T12:13:53.200

You need to replace max-height by height in the container div and add overflow: hidden

#itemSoldOutView {
    background: white;
    position: absolute;
    padding: 15px;
    overflow: hidden;
    height: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

then in div you want to scroll add overflow-y: scroll

working fiddle

ANOTHER EDIT:

Actually you should make the inner div a bit smaller to show all the scrollable items, here I've decreased the max-height to 80%:

#shadow { 
    position:fixed; 
    left:0; 
    top:0; 
    width:100%; 
    height:100%;
    background: darkgray;
    z-index:2;
}

#itemSoldOutView {
    background: white;
    position: absolute;
    padding: 15px;
    overflow: hidden;
    height: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#itemSoldOutViewContent {
    overflow-y: scroll;
    max-height: 80%;
}

#itemSoldOutViewCancel {
    position: fixed;
    right: 5px;
    top: 5px;
    width: 16px;
    height: 16px;
    background: red;
}

<div id="shadow">
    <div id="itemSoldOutView">
        <div id="itemSoldOutViewTitle">
            <div id="itemSoldOutViewCancel"></div>
            <h3>This is the title text:</h3>
        </div>
        <div id="itemSoldOutViewContent">
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            bla<br>
            blabla<br>
            last blabla
        </div>
    </div>
</div>

Actually no. I want the content to be scrollable in the inner div. — progNewbie, Apr 07 '18 at 11:46
I don't want the whole View to get scrolling. Just the inner Content-div ;) So, that the title is still not scrolling. — progNewbie, Apr 07 '18 at 11:48
@progNewbie thanks for downvote while I was working to provide you the solution above :D, updated the answer, is this what you want? — mpro, Apr 07 '18 at 12:08

Yashwanth Naik · Accepted Answer · 2018-04-07T12:17:55.553

1

If you want a scrollable div, just put overflow:scroll inside CSS. The mistake here is put the overflow property inside #itemSoldOutView

Also inherit the height from parent element.

See this fiddle

edited Apr 07 '18 at 12:17

answered Apr 07 '18 at 11:51

Yashwanth Naik

44
4

If you would've looked at the other two answers, you would've seen that your answer is exactly the same. And both other answers don't fix my problem, like I explain to their authors in the comments underneath. But thanks for your effort anyway. – progNewbie Apr 07 '18 at 11:53
I just realised that you also have changed the height from the parent layout from max-height to only height. And it only works this way. Is there any solution which also works with it having max-height? – progNewbie Apr 07 '18 at 12:27

The Mathemagician · Answer 3 · 2018-04-07T11:56:22.600

-2

In css you can use

#itemSoldOutView{
   box-sizing: border-box;
}
#itemSoldOutViewTitle h3{
   position: fixed;
}

But as you more content than the capacity of the div so the content will keep overflowing. If you want to get rid of it then use

#itemSoldOutView{
   box-sizing: border-box;
   overflow: scroll;
}
#itemSoldOutViewTitle h3{
   position: fixed;
}

edited Apr 07 '18 at 11:56

answered Apr 07 '18 at 11:46

The Mathemagician

113
8

This also does not fix my problem. Look at my comments at the other answer. – progNewbie Apr 07 '18 at 11:49
use overflow: scroll; as a css property of the div not the body – The Mathemagician Apr 07 '18 at 11:51
You clearly haven't read my comments below the other answer. – progNewbie Apr 07 '18 at 11:52
To do this you need to set the css property of
to position: fixed;
– The Mathemagician Apr 07 '18 at 11:54
This does not fix my problem. This just destroys the whole layout. – progNewbie Apr 07 '18 at 11:58
Seriously dude I don't have time to give you whole css code. Seems like you are a css rookie trying to push mountain with bare hands. – The Mathemagician Apr 07 '18 at 12:05
I know that it requires some extra css to get desired effect but here no one can give you the exact code. – The Mathemagician Apr 07 '18 at 12:06

Set max-height in inner div does not work

3 Answers3

to position: fixed;