Combine overflow-y: scroll with overflow-x: visible

Question

I have a div, that has flyout divs positioned absolute to the right. Its all working correctly but I need to add a max height to my main div. Since it will overflow, I add overflow-y scroll, but it messes everything up. It prevents my flyout divs from going outside of the main div, and places them inside with a horizontal scrollbar.

I've mocked up an example:

.menu {
  height: 200px;
  max-height: 200px;
  width: 200px;
  background-color: red;
  margin-bottom: 50px;
}

.menu.overflow {
  overflow-y: scroll;
  background-color: purple;
  height: 150px;
  max-height: 150px;
}

.menu-item {
  height: 30px;
  width: 100%;
  background-color: blue;
  position: relative;
  margin-bottom: 10px;
  cursor: pointer;
}

.menu-item-flyout {
  display: none;
  width: 200px;
  height: 100px;
  position: absolute;
  left: 100%;
  background-color: green;
  top: 0;
}

.menu-item:hover .menu-item-flyout {
  display: block;
}

<!-- no overflow y scroll -->

working correctly:
<div class="menu">
  <div class="menu-item">
    <div class="menu-item-flyout"></div>
  </div>
  
  <div class="menu-item">
    <div class="menu-item-flyout"></div>
  </div>
  
  <div class="menu-item">
    <div class="menu-item-flyout"></div>
  </div>
</div>

<!-- overflow y scroll -->

This is not working. I want to add overflow y
scroll to menu but it prevents the flyout

<div class="menu overflow">
  <div class="menu-item">
    <div class="menu-item-flyout"></div>
  </div>
  
  <div class="menu-item">
    <div class="menu-item-flyout"></div>
  </div>
  
  <div class="menu-item">
    <div class="menu-item-flyout"></div>
  </div>
</div>

I have removed chatty material from your posts before, so I am downvoting this time as a reminder. Please try to keep your posts succinct and free of chat-room material. — halfer
– halfer, Commented Mar 25, 2020 at 19:43

mattbasta · Accepted Answer · 2020-03-05 05:16:37Z

3

Unfortunately you can't mix overflow values. Per MDN on overflow-x:

If overflow-y is hidden, scroll or auto and this property is visible (default) it will implicitly compute to auto.

auto, in this case, forces a scroll bar. There is no way to get around this: you cannot have a box overflow in only one direction.

As a general principal, menus based on hover are difficult to navigate as they are, but are treacherous from an accessibility standpoint. Adding scroll bars to the mix is a recipe for disaster. I'd recommend approaching the problem from another angle.

answered Mar 5, 2020 at 5:16

mattbasta

13.8k10 gold badges51 silver badges70 bronze badges

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

Collectives™ on Stack Overflow

Combine overflow-y: scroll with overflow-x: visible

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related