How to overflow-x: visible while overflow-y: scroll

Question

MDN, while talking about overflow, states:

MDN Note: Setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto.

So in the following context...

overflow-y: scroll/auto
overflow-x: visible

...overflow-x: visible behaves as overflow-x: auto, which in turn seems to behave as overflow-x: hidden. Notice in the demo below that half of the orange square is hidden on the Z plane.

::-webkit-scrollbar {
  display: none;
}

#grid {
  width: 600px;
  height: 150px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: black;
}

.column {
  position: relative;
  box-sizing: border-box;
  border: solid red 3px;
}

.column:nth-child(1) {
  overflow-y: scroll; /* auto also does not work */
  overflow-x: visible;
  /*
  ** overflow: visible;
  **
  ** uncomment this to allow
  ** overflow on the x plane...
  */
}

.overflow {
  height: 75px;
  box-sizing: border-box;
  border: solid green 3px;
}

#square {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%);
  background: orange;
}

<div id='grid'>
  <div class='column'>
    <div class='overflow'></div>
    <div class='overflow'></div>
    <div class='overflow'></div>
    <div id='square'></div>
  </div>
  <div class='column'></div>
</div>

How can I make overflow-x truly visible while using overflow-y: scroll?

This is what I would like to do...

@多一点点爱 no, i want to show the orange square on the x-plane, not hide it. i want overflow-x: visible to behave like overflow-x: visible. i want the orange square to overlap the grid's right column. do you understand? — oldboy
– oldboy, Commented Dec 31, 2019 at 1:37
@多一点点爱 i uploaded a picture. please look at the picture — oldboy
– oldboy, Commented Dec 31, 2019 at 1:42
You can’t have something, as far as I know, that scrolls on one axis and shows overflow on another. An element either shows a scrolling view of its contents or it doesn’t. — Ry-
– Ry- ♦, Commented Dec 31, 2019 at 1:45
@Ry- theres no way to accomplish the overflow on the X plane being visible, while everything on the Y plane is scrolled? not even with some sort of hack approach? — oldboy
– oldboy, Commented Dec 31, 2019 at 1:52

多一点点爱 · Accepted Answer · 2019-12-31 03:07:33Z

2

@oldboy Is that all right with you？

::-webkit-scrollbar {
  display: none;
}

#grid {
  width: 600px;
  height: 150px;
  background: black;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 150px;
}

.column {
  box-sizing: border-box;
  border: solid red 3px;
  height: 100%;
}

.column:nth-child(1) {
  /*
  ** overflow: visible;
  **
  ** uncomment this to allow
  ** overflow on the x plane...
  */
}

.overflow {
  width: calc(100% - 30px);
  height: 75px;
  box-sizing: border-box;
  border: solid green 3px;
}

#square {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(-100%, -50%);
  background: orange;
}
.wrap {
  width: calc(100% + 30px);
  position: relative;
  overflow-y: scroll; /* auto also does not work */
  overflow-x: visible;
  height: 100%;
}

<div id='grid'>
  <div class='column'>
    <div class="wrap">
      <div class='overflow'></div>
      <div class='overflow'></div>
      <div class='overflow'></div>
      <div id='square'></div>
    </div>
  </div>
  <div class='column'></div>
</div>

edited Dec 31, 2019 at 3:07

answered Dec 31, 2019 at 2:14

多一点点爱

1,3538 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

oldboy Over a year ago

this is precisely what i wanted to do, although i am going to have to take a look at the code to see how you did it before i select it as the answer, but ill give you a vote up for the time being. xiexie <333

oldboy Over a year ago

why did you get rid of the grid?

多一点点爱 Over a year ago

Or use grid-template-rows: 150px;

多一点点爱 Over a year ago

@oldboy I wanted to do that before.but This may not be a good idea. because The left will cover the right

oldboy Over a year ago

it is okay. your english is better than my chinese :)

|

Collectives™ on Stack Overflow

How to overflow-x: visible while overflow-y: scroll

1 Answer 1

15 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related