4

I'm trying to lay out a simple message container that will scroll when needed. This works as expected when the parent container only contains a header, and the message box, however, when wrapping it in another container and adding a bar on the right the side of the message box, the message box height does not respect the overflow setting and expands past the parent container. How can I get the message box to scroll while using a column next to it?

.flex-container {
    display: flex;
}
.flex-fill {
    flex: 1 0 auto;
}
.flex-rows {
    flex-direction: column;
}
.message-container {
    justify-content: flex-end;
    overflow-y: auto;
    flex: 1;
}
.message {
    height: 3rem;
}
<body>
    <div class="flex-container flex-fill flex-rows" style="background-color: red; padding: 1rem; height: 500px;">
        <div id="top-bar" style="background-color: purple;">
            <h3>Working Scroll</h3>
        </div>
        <div class="message-container" style="background-color: white; padding: 1rem;">
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
        </div>
    </div>
    <div class="flex-container flex-fill flex-rows" style="background-color: green; padding: 1rem; height: 500px;">
        <div id="top-bar" style="background-color: purple;">
            <h3>Broken Scroll</h3>
        </div>
        <div class="flex-container flex-fill" style="background-color: blue; padding: 1rem;">
            <div class="message-container" style="background-color: white; padding: 1rem;">
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
            </div>
            <div id="right-bar" style="background-color: orange; width: 50px;">
                <h3>Right</h3>
            </div>
        </div>
    </div>
</body>

Here is a CodePen example. https://codepen.io/dwpuush/pen/eYzvQQJ

TylerH
  • 20,799
  • 66
  • 75
  • 101
dwelch
  • 2,996
  • 3
  • 21
  • 13
  • 2
    Just FYI it may help a little to put all your styles in the CSS section rather than splitting some out as inline styles in the HTML file. – TylerH Oct 26 '20 at 20:29

1 Answers1

0

Update the flex-fill class to allow the element to shrink and also add min-height:0; to force the element to shrink even past its content size

.flex-container {
    display: flex;
}
.flex-fill {
    flex: 1 1 auto; /* instead of 1 0 auto*/
    min-height:0;
}
.flex-rows {
    flex-direction: column;
}
.message-container {
    justify-content: flex-end;
    overflow-y: auto;
    flex: 1;
}
.message {
    height: 3rem;
}
<body>
    <div class="flex-container flex-fill flex-rows" style="background-color: red; padding: 1rem; height: 500px;">
        <div id="top-bar" style="background-color: purple;">
            <h3>Working Scroll</h3>
        </div>
        <div class="message-container" style="background-color: white; padding: 1rem;">
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
            <div class="message">Testing Message</div>
        </div>
    </div>
    <div class="flex-container flex-fill flex-rows" style="background-color: green; padding: 1rem; height: 500px;">
        <div id="top-bar" style="background-color: purple;">
            <h3>Broken Scroll</h3>
        </div>
        <div class="flex-container flex-fill" style="background-color: blue; padding: 1rem;">
            <div class="message-container" style="background-color: white; padding: 1rem;">
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
                <div class="message">Testing Message</div>
            </div>
            <div id="right-bar" style="background-color: orange; width: 50px;">
                <h3>Right</h3>
            </div>
        </div>
    </div>
</body>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • That worked like a charm. I'd tried the min-height change, but had the flex-fill wrong. Thanks! – dwelch Oct 26 '20 at 21:27