Unable to hide overflow for x axis and show overflow for y axis-CodePudding

I have the following where I am able to hide overflow for y axis.
And show overflow for x axis.

    <style type="text/css">
      #outer-wrapper {
        overflow-y: hidden;
      }
      #outer {
        width:100px;
        height:100px;
        background:red;
        border:solid red 1px;
        overflow-x: visible;
      }
      #inner {
        width:300px;
        height:300px;
        background:green;
      }
    </style>
    <div id="outer-wrapper">
      <div id="outer">
        <div id="inner"></div>
      </div>
    </div>

I want this to be in inverse where I can hide overflow for x axis.
And show overflow for y axis.

Thus tried the following.
But result is the same, Y axis is still hidden and X axis is still overflowing. Why?

    <style type="text/css">
      #outer-wrapper {
        overflow-x: hidden;
      }
      #outer {
        width:100px;
        height:100px;
        background:red;
        border:solid red 1px;
        overflow-y: visible;
      }
      #inner {
        width:300px;
        height:300px;
        background:green;
      }
    </style>
    <div id="outer-wrapper">
      <div id="outer">
        <div id="inner"></div>
      </div>
    </div>

Also tried following. Here I am able to hide X axis as intended.
But now Y axis is hidden too which is wrong.

    <style type="text/css">
      #outer-wrapper {
        overflow-x: hidden;
      }
      #outer {
        width:100px;
        height:100px;
        background:red;
        border:solid red 1px;
        overflow-y: visible;
        overflow-y: hidden;
      }
      #inner {
        width:300px;
        height:300px;
        background:green;
      }
    </style>
    <div id="outer-wrapper">
      <div id="outer">
        <div id="inner"></div>
      </div>
    </div>

CodePudding user response：

That can be useful:

 <style type="text/css">
     
      #outer {
        width:100px;
        height:100px;
        background:red;
        border:solid red 1px;
        overflow-y: auto;  //shows the y axis
        overflow-x: hidden; //hiddens the x axis
      }

      #inner {
        width:300px;
        height:300px;
        background:green;
      }

    </style>


    <div id="outer-wrapper">
      <div id="outer">
        <div id="inner"></div>
      </div>
    </div>

CodePudding user response：

<style>
  #outer-example {
    overflow-x: hidden;
  }
  #outer {
    width:100px;
    height:100px;
    overflow-y: visible;
  }
  #inner {
    width:300px;
    height:300px;
   }
</style>
<div id="outer-example">
  <div id="outer">
    <div id="inner"></div>
  </div>
</div>