I'm facing a challenge in setting up a basic message container that can scroll when necessary. The issue arises when I place the message box within another container and add a side bar, causing the message box to exceed the parent container's height due to an overflow setting problem. How can I achieve a scrolling message box while having a column adjacent 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>
... (Remaining code continues as before) ...Explore a live demo on CodePen. https://codepen.io/dwpuush/pen/eYzvQQJ