I am facing an issue with my dashboard setup that includes a sidebar. I want the content area to have horizontal overflow scroll, but instead of that, it overflows its parent element. I experimented with flex and grid-template-columns values (1fr 5fr) without success. The desired behavior for the sidebar is
clamp(fixedminval, 1fr, fixedmaxval)<div class="content">
<div class="sidebar">sidebar</div>
<div class="container">
<p>
How can I prevent this element from causing its parent to overflow and instead provide its own X-axis scrollbar?
</p>
<div>
</div>
<style>
.content {
display: flex;
min-height: 100vh;
width: 100vw;
max-width: 100vw;
}
.sidebar {
flex-grow: 1;
flex-basis: 0;
background: grey;
}
.container {
flex-grow: 5;
flex-basis: 0;
margin: 0;
background: salmon;
}
p {
max-width: 100%;
white-space: nowrap;
overflow: scroll;
}
</style>
I have tried various solutions like adjusting the width and max-width properties, but none seem to resolve the issue.