Overflow-y: scroll with overflow-x: visible [duplicate]

Question

Is it possible to have an item overflow horizontally out of a vertically scroll-able list?

I have a codepen example here:

var $item = $('#1'),
  $button = $('.button');

$button.on("click", function() {
  $item.toggleClass('addMargin');
});

.sidenav {
  width: 300px;
  background-color: grey;
  position: fixed;
  padding: 20px;
}
.addMargin {
  margin-left: 60px;
}
.item {
  width: 100%;
  overflow-y: auto;
  height: 100vh;
  z-index: 5;
  position: relative;
}
.sub-item {
  transition: margin-left 1s cubic-bezier(0.36, -0.48, 0, 2.22);
  background-color: orange;
  height: 100px;
  width: 100%;
  margin-bottom: 10px;
  z-index: 10;
  position: relative;
}
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidenav">
  <button class="button">test</button>
  <div class="item">
    <div id="1" class="sub-item"></div>
    <div class="sub-item"></div>
    <div class="sub-item"></div>
    <div class="sub-item"></div>
    <div class="sub-item"></div>
  </div>
</div>

In the example I'd like to have the yellow item stick out of the list. It is not a problem about the visibility of the scrollbars.

Any suggestions? CSS / JavaScript?

Thanks!

@SeanLeBlanc, the OP's question is asking if an element can overflow along the x-axis while the y-axis is set to overflow scroll. The duplicate you posted is a different issue entirely... — Hunter Turner
– Hunter Turner, Commented Jul 19, 2016 at 14:33
@HunterTurner Answers in the question I referenced explain why the obvious solution to the OP's question (i.e. overflow-x:visible; overflow-y:auto;) wouldn't work and offer some workarounds. Would it be better to just comment with a link to the question in a case like this? — Sean LeBlanc
– Sean LeBlanc, Commented Jul 19, 2016 at 15:13

Community · Accepted Answer · 2017-05-23 12:01:05Z

7

After reading https://stackoverflow.com/a/6433475/4386196 it seems like the answer is no, it's not possible. You would need to set overflow-x: visible, but since you've set overflow-y then it is treated as auto which hides the content.

This probably doesn't solve your problem exactly, but if you add:

margin-right: -100px; padding-right: 100px;

to .item you can move the scrollbar and give more room for overflow within the box. Closest I could come to a solution.

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Jul 19, 2016 at 20:32

Zachary Wand

3664 silver badges11 bronze badges

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

2 Comments

emvaized Over a year ago

Thanks! My case is slightly different from OP's - I needed to set 'overflow-y: visible' for children of div with 'overflow-x: hidden'. Following your idea, I ended up with adding 'margin-top' and 'margin-bottom' for children, and it worked!

Pouya Jabbarisani Over a year ago

You should get a life-saver badge!💙

Collectives™ on Stack Overflow

Overflow-y: scroll with overflow-x: visible [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related