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

Issue

To keep things neat and short:

https://jsfiddle.net/m53ockLu/

.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;
}

<div class="container">
  <div class="sidebar">
    <div class="element">
      <div class="first"></div>
      <div class="second">
        <div class="second-absolute"></div>
      </div>
    </div>
    <div class="element">

    </div>
    <div class="element">

    </div>
    <div class="element">

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

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.

Solution

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;
}

<div class="container">
  <div class="sidebar">
    <div class="element">
      <div class="first"></div>
      <div class="second">
        <div class="second-absolute"></div>
      </div>
    </div>
    <div class="element">

    </div>
    <div class="element">

    </div>
    <div class="element">

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

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;
}

<div class="container">
  <div class="sidebar">
    <div class="element">
      <div class="first"></div>
      <div class="second">
        <div class="second-absolute"></div>
      </div>
    </div>
    <div class="element">

    </div>
    <div class="element">

    </div>
    <div class="element">

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

Answered By - Zach Jensz