How to have overflow scroll only in one axis but visibility and no scroll in the other-CodePudding

I have researched this but could only find very old answers and no real solution. This is the problem:

div {position: absolute;width:300px;height:250px;background:black;overflow-y:scroll;overflow-x:visible;}
span {display:block;position:relative;background:red;width:300px;height:530px;}
button {position: absolute;width:100px;height:50px;background:blue;left:250px;}

<div>
 <span>
  <button>
  </button>
 </span>
</div>

the blue rectangle should stick out of the main div without the need of a scrollbar, whereas the red rectangle should be scrollable in the y axis. But it seems like I cant have a scrollbar only in one axis. Is there a workaround for this? CSS only please.

CodePudding user response：

It works if you put an extra div outside and move the button out of the scrollable area:

#container{position: relative;}
#scrollable {position: absolute;width: 300px;height: 250px;background: black;overflow-y: scroll;overflow-x: hidden;}
#red {display: block;position: relative;background: red;width: 300px;height: 530px;}
button {position: absolute;width: 100px;height: 50px;background: blue;left: 250px;}

<div id="container">
    <div id="scrollable">
        <span id="red"></span>
    </div>
    <button></button>
</div>

CodePudding user response：

You need at least one more element as a holder. With an element that has scrolling enabled, no element can stick out to the side.

also, you should use a div instead of making a span a block element, since span tags should be used to mark up individual words as inline-block element inside div tags.

div {
  position: absolute;
  width:300px;
  height:250px;
  background:black;
}

div.scroll {
  position: relative;
  width:100%;
  height:100%;
  background:black;
  overflow-y:scroll;
  overflow-x:hidden;
}

div.content {
  position:relative;
  background:red;
  width:100%;
  height:530px;
}

button {
  position: absolute;
  width:100px;
  height:50px;
  background:blue;
  top: 0;
  right:-50px;
}

<div>
  <div >
    <div >
    </div>
  </div>
  <button>
  </button>
</div>