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

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 >
  <div>
    <div >
      LEFT1
      <div >
        INNER
      </div>
    </div>
  </div>
  <div>
    <div >
      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 ?

CodePudding user response：

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 >
  <div>
    <div >
      LEFT1
      <div >
        INNER
      </div>
    </div>
  </div>
  <div>
    <div >
      LEFT2
    </div>
  </div>
</div>

CodePudding user response：

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 >
  <div >
    <div >
      LEFT1
      <div >
        INNER
      </div>
    </div>
  </div>
  <div>
    <div >
      LEFT2
    </div>
  </div>
</div>

Note: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow