Visible overflow on X axis, but auto/scroll on axis Y

Question

To keep things neat and short:

.container {
  max-height: 500px;
  background: grey;
}

.sidebar {
  height: 100vh;
  width: 150px;
  overflow-x: scroll;
  overflow-y: auto;
  background: red;
}

.element {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 5px;
  height: 200px;
  width: 20px;
  background: green;
}

.first {
  position: relative;
  display: block;
  height: 20px;
  width: 100px;
  background: pink;
}

.second {
  display: inline-block;
}

.second-absolute {
  position: absolute;
  height: 20px;
  width: 250px;
  background: purple;
}

Is it possible to keep the red container scrollable on vertical axis, and at the same time make the purple (.second-absolute) element overflow this red container horizontally? I'm totally out of ideas, I thought that overflow-x & overflow-y should do the trick, but no dice.

Thank you very much for any help.

user_14190543 · Answer

Is it possible to keep the red container scrollable on vertical axis, and at the same time make the purple (.second-absolute) element overflow this red container horizontally?

No.

I tried Ethan's suggestion and couldn't get the purple box to visibly overflow the scrollbar:

.container {
  max-height: 500px;
  background: grey;
}

.sidebar {
  height: 100vh;
  width: 150px;
  overflow-y: scroll;
  background: red;
}

.element {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 5px;
  height: 200px;
  width: 20px;
  background: green;
}

.first {
  position: relative;
  display: block;
  height: 20px;
  width: 100px;
  background: pink;
}

.second {
  display: inline-block;
}

.second-absolute {
  position: absolute;
  height: 20px;
  width: 250px;
  background: purple;
}

I don't think the browser will let you overflow the scrollbar, I even put z-index, explicitly said to visibly overflow, played around with the position property etc.

Consider this example of letting the content dictate the size:

.container {
  max-height: 500px;
  background: grey;
}

.sidebar {
  height: 100vh;
  width: max-content;
  overflow-y: auto;
  background: red;
}

.element {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 5px;
  height: 200px;
  background: green;
}

.first {
  display: block;
  height: 20px;
  background: pink;
}

.second {
  display: inline-block;
}

.second-absolute {
  height: 20px;
  width: 250px;
  background: purple;
}

user_17493431 · Answer

You made the parent div sidebar have overflow-x: scroll;, overflow-y: auto;. Instead, make each child have its own overflow properties instead of the parent.

Visible overflow on X axis, but auto/scroll on axis Y

2 Answers