overflow-y doesn't let absolute positon overlap horizontally

Question

I'm making a nav bar. It can be expanded to be greater than the height of the viewport. So I slapped an overflow-y: auto on it. It works fine and dandy.

On hover, I'd like to expand horizontally, but from what I'm reading any overflow property regardless of x/y will prevent the overlap.

I want to be able to scroll the nav but have absolutely positioned elements lay over the boundaries of the parent element despite the overflow-y set to auto.

Heres a crude and simple example:

Html:

<div class="links">
  <div class='navGroup'>
    <div class='icon'>somePic1</div>
    <div class='link'>link1</div>
  </div>
  <div class='navGroup'>
    <div class='icon'>somePic2</div>
    <div class='link'>link2</div>
  </div>
  <div class='navGroup'>
    <div class='icon'>somePic3</div>
    <div class='link'>link3</div>
  </div>
  <div class='navGroup'>
    <div class='icon'>somePic4</div>
    <div class='link'>link4</div>
  </div>
  <div class='navGroup'>
    <div class='icon'>somePic5</div>
    <div class='link'>link5</div>
  </div>
</div>
<div class="mainContent">
Some Content
</div>

CSS:

body {
  display: flex;
}

div.links {
  height: 50px;
  width: 100px;
  overflow-y: auto;
}

div.mainContent {
  background:green;
}

div.link {
  display: none;
}

div.navGroup {
  position: relative;
  width: 100px;
}
div.navGroup:hover {
  background: red;
}

div.navGroup:hover div.link {
  width: 300px;
  display: block;
  position: absolute;
  top: 0;
  left: 50px;
  background: blue;
}

Here's a codepen link if anyone wants to mess around with the code: https://codepen.io/andrewsunglaekim/pen/LyWrym

Note if you comment the overflow: auto; out, it spills over like it should, but the links all show and are not scrollable on the set height.

Edit I forgot to mention that setting overflow-x: visible doesn't do anything. Apparently the interpreter changes it to auto by default ...

Any work arounds would be greatly appreciated, thanks!

I don't think it's possible. You either control overflow or you don't. You're essentially saying that you don't want to contain overflow but when content does overflow, provide a scrollbar. — hungerstar, Apr 28 '17 at 20:13
i want to control overflow vertically with scroll, but not horizontally. — Andrew Kim, Apr 28 '17 at 20:20
But you're also asking for the content (the absolute positioned elements) to overflow a parent/ancestor element that is using overflow to produce a scrollbar correct? — hungerstar, Apr 28 '17 at 20:32
_"Apparently the interpreter changes it to auto by default ..."_ - yes, see here for a more in-depth explanation: http://stackoverflow.com/a/6433475/1427878 — CBroe, Apr 28 '17 at 20:45

overflow-y doesn't let absolute positon overlap horizontally

0 Answers0