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

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

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

    </div>
    <div >

    </div>
    <div >

    </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.

CodePudding user response：

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.

CodePudding user response：

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 >
  <div >
    <div >
      <div ></div>
      <div >
        <div ></div>
      </div>
    </div>
    <div >

    </div>
    <div >

    </div>
    <div >

    </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 >
  <div >
    <div >
      <div ></div>
      <div >
        <div ></div>
      </div>
    </div>
    <div >

    </div>
    <div >

    </div>
    <div >

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