Div is growing in length. I want a overflow scroll bar instead - but it is ignored

Question

I have a div that has the following class:

.messages_box {
    border: 1px solid #bbb;
    height: 20%;
    max-height: 20%;
    min-height: 20%;
    width: 100%;
    padding: 0; /* 10px 10px 10px ;*/
    margin-top: 5px;
    margin-left: 0px;
    background: #B0E0E6; /*powder blue */
    overflow-x: hidden;
    overflow-y: auto;
    /* try so get it not to grow */
    display: table-cell;
    display: inline-block;
    }

as a child element of a parent modal dialog:

        .modal-dialog {
    background: #c1d9ff;
    border: 1px solid #3a5774;
    color: #000;
    padding: 4px;
    position: absolute;
    }

In other words, the messages_box sits inside the modal window. When I add new divs (messages) dynamically in code, the div "messages_box" grows in length. I never see the overflow scroll bar. I need the div to be fixed to only 20% of the screen as I mark the height in the CSS. The page runs on mobile devices and desktops so I would rather not use pixels.

Any ideas? I have been working this for too many hours to think straight any more. Thank you.

Answer 1

To set the height of a div as a percentage, the container of the div needs to have an explicit height on it. Take a look at my example: JSFiddle.

.message_wrap {
    height:500px;
}
.message_box {
    border:1px solid #bbb;
    background-color: #B0E0E6;
    padding: 10px;
    width:350px;
    height:20%;
    overflow-y:scroll;
    overflow-x:hidden;
}

HTML

<div class="message_wrap">
    <div class="message_box">
        <p class="message">Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</p>
        <p class="message">Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service..</p>
        <p class="message">Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.</p>
    </div>
</div>

---

An alternate solution would be change the max-height to vh units. That is viewport-height.

height:20%; would be height:20vh; It would effectively set .message_box to 20% of the viewport height, thus no longer needing an explicit height set on the parent.