4

I have a strange issue with Google Chrome, flexbox and overflow.

When a container is in flexbox mode and a child starts to overflow horizontally (say you change the width of the content via javascript), the scrollbar appears but can't be manipulated.

Forcing the browser to redraw (by resizing for example) will make the scrollbar functional again.

Here's an example of this : http://jsfiddle.net/w8rtk2de/3/

  • In Google Chrome
  • Try to scroll the paragraph
  • Click twice on "Toggle class" to remove the scroll and set it back again
  • Try again to scroll (Scroll won't work)
  • Resize the window to force a redraw
  • Scroll works again
  • This seems to happen only when the container is in display flex.

$('#toggle').on('click', function(e) {
    $('#target').toggleClass('overflowing');
});
.overflowing {
    overflow-x: auto;
    white-space:nowrap;
}

.row {
    display: flex;
}

.col {
    width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p><a id="toggle" href="#">Toggle class</a></p>

<div class="row">
    <div class="col">
        <div id="target" class="overflowing">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aspernatur reiciendis amet libero quasi laborum unde sint eum dolores vitae dolorum autem nihil quae voluptatum illo a atque velit placeat.</p>
        </div>
    </div>
</div>

If anybody has a quick hack to solve that issue, it would be great.

Manuszep
  • 813
  • 11
  • 20

1 Answers1

4

okay, here in quick:

i added position:relative and z-index:1;

.overflowing {
  overflow-x: auto;
  white-space:nowrap;
  position: relative;
  z-index: 1;
}

check on jsFiddle

Alex
  • 56
  • 4
  • Ah! I don't know why I did not think of it. It seems to work with the position relative only. Thanks. – Manuszep Apr 08 '15 at 09:25