Markup & Styling
* { box-sizing: border-box;}body { font-family: sans-serif; background: #dedede; padding: 48px;}#app { display: flex; width: 100%;}.box-1 { border: 1px solid red;}.box-2 { padding: 10px; border: 1px solid blue; flex: 1;}.overflow-container { padding: 10px; width: 100%; border: 1px solid green; overflow: auto;}.overflow-content { width: 100%; min-width: 2000px; border: 1px solid pink;}<div id="app"><div class="box-1">This is 1</div><div class="box-2"> This is 2<div class="overflow-container"><div class="overflow-content">This is my overflow content</div></div></div></div>When using the display: flex property, the overflow: auto property doesn't function as expected. Instead, the size of the parent element expands to accommodate the width of the overflowing content. I'm seeking a solution to implement a horizontal scrollbar for the expanded content.It does work as expected without flexbox