CODEWITHSUNDEEP
cssscrolloverflowflexbox
riv
riv

Reputation: 7343

Why do scrollbars appear in flexbox with overflow: visible?

As seen in this fiddle, I have a div with overflow-x: hidden and overflow-y: visible, and it still displays a scrollbar. Removing the display: flex or height attributes from outer div, or overflow-x: hidden fixes the problem.

Here's the fiddle HTML:

<div class="outer">
  <div class="inner">Text<br>More text<br>Even more text</div>
</div>

CSS:

div.outer {
    display: flex;
    height: 30px;
    overflow: visible;
}
div.inner {
    overflow-x: hidden;
    overflow-y: visible;
    border: 1px solid black;
}

Upvotes: 1

Views: 878

Answers (1)

eclipsis
eclipsis

Reputation: 1550

The issue with overflow-x/y is that visible can't be mixed with another value, so in this case, visible will be treated as auto.

Upvotes: 2

Related Questions