Flex inside flex with overflow-x - html

Question

I'd like to create 2 columns inline. The first column has fixed width of 200px and second column should take up the rest of the screen. The second column should autoscroll on the x-axis. I've been trying to use flex but I'm very confused by the markup. Can someone please explain what I'm doing wrong.
Path: html
<section className="container">
<div className="container-name">1</div>
<div className="container-time">
<div className="element">
222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222999999
</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;
}

Answer 1

You can get the desired output using:
max-width on the container
display: inline-flex; on the container
max-width on the container-time
.container {
max-width: 100%;
display: inline-flex;
}
.container-name {
width: 200px;
border: 1px solid red;
}
.container-time {
flex-grow: 1;
max-width: calc(100% - 200px);
border: 1px solid green;
}
.element {
display: flex;
overflow-x: auto;
}
<section class="container">
<div class="container-name">1</div>
<div class="container-time">
<div class="element">
222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222
</div>
</div>
</section>

Answer 2

Hope this solution will help you!
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
.container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
min-height: 100vh;
}
.container .split {
position: relative;
width: 100%;
height: 100%;
}
.container .split__left {
max-width: 400px;
background-color: coral;
}
.container .split__right {
padding: 2rem;
overflow-x: scroll;
background-color: pink;
}
.container .split__right p {
white-space: nowrap;
}
<div class="container">
<div class="split split__left"></div>
<div class="split split__right">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil repellat sapiente assumenda. Ex fugit at amet sed libero eaque. Debitis obcaecati aperiam hic possimus unde. Voluptatibus cumque illo dolores architecto.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil repellat sapiente assumenda. Ex fugit at amet sed libero eaque. Debitis obcaecati aperiam hic possimus unde. Voluptatibus cumque illo dolores architecto.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil repellat sapiente assumenda. Ex fugit at amet sed libero eaque. Debitis obcaecati aperiam hic possimus unde. Voluptatibus cumque illo dolores architecto.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil repellat sapiente assumenda. Ex fugit at amet sed libero eaque. Debitis obcaecati aperiam hic possimus unde. Voluptatibus cumque illo dolores architecto.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil repellat sapiente assumenda. Ex fugit at amet sed libero eaque. Debitis obcaecati aperiam hic possimus unde. Voluptatibus cumque illo dolores architecto.</p>
</div>
</div>
[NOTE] see this in bigger screen.