Allow overflow for a inner div only on one axis - html

Question

I have the following where I need the overflow hidden horizontally.
But overflow should be visible vertically.
Having issues where an overflow: hidden on x axis affects y -axis too.
I have tried to specify the axis for over flow as follows but it still hides the y axis.
.container{
.....
overflow-x: hidden;
}
See the screenshots to see what I am trying to achieve.
div.left {
margin-left: 10px;
background:blue;
height:200px;
width:300px;
}
.container{
padding-top: 20px;
margin-top: 10px;
background:black;
height:220px;
width:450px;
overflow: hidden;
}
.container > div {
display: table-cell;
}
.inner {
height: 500px;
background-color: red;
overflow-y: visible;
}
<div class="container">
<div>
<div class="left">
LEFT1
<div class="inner">
INNER
</div>
</div>
</div>
<div>
<div class="left">
LEFT2
</div>
</div>
</div>
Suggestions from from following blogs does not work for this scenario.
https://www.gavsblog.com/blog/only-hide-css-overflow-on-a-single-x-or-y-axis-or-ignore-it
https://css-tricks.com/popping-hidden-overflow/
This is what I have now.
Current
This is what I am trying to achieve.
Expected Result
I can't remove the x-axis overflow cos it would look like this where LEFT2 overflows horizontally which is also incorrect.
Removing overflow
Or is there another way to make overflow hidden on the x axis without the use of overflow:hidden ?

Answer 1

You can try to use grid approach to allow your cells to scroll.
Take a look at Code snippet's comments.
.container {
display: grid; /* make your container grid */
grid-template-columns: 2fr 1fr; /* create grid columns */
column-gap: 10px; /* add gap between columns */
padding: 20px 10px;
margin-top: 10px;
background: black;
height: 220px;
width: 450px;
/* overflow: hidden; */
}
.inner {
height: 500px;
background-color: red;
overflow-y: visible;
}
.container > div {
overflow-x: hidden; /* allow your cell to overflow */
}
div.left {
/*margin-left: 10px;*/
background: blue;
height: 200px;
width: 300px;
}
div.right {
background: green;
height: 300px;
width: 100px;
}
<div class="container">
<div>
<div class="left">
LEFT1
<div class="inner">
INNER
</div>
</div>
</div>
<div>
<div class="left">
LEFT2
</div>
</div>
</div>

Answer 2

Solution is overflow-x: clip:
div.left {
margin-left: 10px;
background:blue;
height:200px;
width:300px;
}
.container{
padding-top: 20px;
margin-top: 10px;
background:black;
height:220px;
width:450px;
overflow-x: clip;
overflow-y: visible;
}
.container > div {
display: table-cell;
}
.inner {
height: 500px;
background-color: red;
}
<div class="container">
<div class="aa">
<div class="left">
LEFT1
<div class="inner">
INNER
</div>
</div>
</div>
<div>
<div class="left">
LEFT2
</div>
</div>
</div>
Note: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow