I'm looking to set up a layout with 2 columns side by side. The first column should have a fixed width of 200px, while the second column should take up the remaining space on the screen. Additionally, I want the content in the second column to auto-scroll horizontally. I've been attempting to use flexbox for this but I find myself confused by the markup. Could someone please help me understand what I'm doing incorrectly?
Path: html
<section className="container">
<div className="container-name">1</div>
<div className="container-time">
<div className="element">
222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222999999
</div>
</div>
</section>
Path: CSS
.container {
flex: 0 0 auto;
}
.container-name {
width: 200px;
border: 1px dotted;
}
.container-time {
flex: 0 0 auto;
border: 1px solid;
}
.element {
display: flex;
overflow-x: auto;
}