Horizontal scroliing overflowing parent in flexbox - html

Question

I am trying to create 2 column divs in which one of them is scrollable horizontally (no wrap), but it keeps overflowing his parent container. The problem is both divs are using flex to calculate their size.
Is there a way to prevent the overflowing except using a fixed width on one of them?
<div class="container">
<div class="small-container">
</div>
<div class="large-container">
<div class="horiz-container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
body {
margin: 0;
}
div {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: row;
background-color: grey;
width: 100vw;
height: 100vh;
box-sizing: border-box;
}
.small-container {
display: flex;
flex-direction: column;
flex: 0 0 200px;
background-color: salmon;
margin: 10px;
box-sizing: border-box;
}
.large-container {
display: flex;
flex-direction: column;
flex: 1 0 0;
background-color: lightBlue;
margin: 10px;
box-sizing: border-box;
}
.horiz-container {
display: flex;
flex-direction: row;
height: 200px;
background-color: purple;
flex-wrap: nowrap;
width: 100%;
}
.box {
width: 100px;
height: 100px;
background-color: red;
margin: 5px;
}
https://jsfiddle.net/0m6Lj2re/

Answer 1

The changes made are in classes .large-container, .horiz-container and .box
body {
margin: 0;
}
div {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: row;
background-color: grey;
width: 100vw;
height: 100vh;
box-sizing: border-box;
}
.small-container {
display: flex;
flex-direction: column;
flex: 0 0 200px;
background-color: salmon;
margin: 10px;
box-sizing: border-box;
}
.large-container {
background-color: lightBlue;
margin: 10px;
box-sizing: border-box;
overflow: hidden;
}
.horiz-container {
/*height: 200px;*/
background-color: purple;
width: 100%;
overflow: auto;
white-space: nowrap;
}
.box {
width: 100px;
height: 100px;
background-color: red;
margin: 5px;
display: inline-block;
}
<div class="container">
<div class="small-container">
</div>
<div class="large-container">
<div class="horiz-container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>