Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Overflow Issues with Flexbox

See original GitHub issue

I’m using flexbox grid in Foundation 6 and for some reason display: flex; affects the overflow on the .CodeMirror-scroll element causing it to not clip it’s content and/or scroll. The whole page scrolls horizontally. Adding max-width to the .CodeMirror-scroll element manages to patch the issue.

Here’s a working example of what I’m talking about http://codepen.io/KnightYoshi/pen/akjVzj

Issue Analytics

State:
Created 7 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

4reactions

kurtfunaicommented, Jul 25, 2017

Having this same issue when using with Bulma.

1reaction

marijnhcommented, Aug 6, 2017

Issue #4895 notes that this also happens for vertical (flex-direction: column) layout – there the height of the editor gets ignored by Firefox and Safari

Top Results From Across the Web

How to Fix Overflow Issues in CSS Flex Layouts - Modus Create

Under certain circumstances overflow needs a little extra love. It turns out that there was a feature in the flexbox specification that added...

Css flex overflow issue

What I'm trying to do is never let .content exceed the top position less than 0. Even the most ideal situation will be...

Overflow Issues In CSS - Smashing Magazine

As useful as CSS grid and flexbox are, they can easily cause overflow if used incorrectly. As we discussed, not using flex-wrap: wrap...

[css-flexbox] Vertical content overflows flex column layout ...

I mean that if the flexbox is fixed height, and its children are taller than it, then you'll get overflow. Exactly which element...

Horizontal Overflow With Flexbox CSS | by Amir Tugendhaft

Another workaround is to wrap our container with another div, which will be used as the scrollable container. We'll switch our flex-container 's ......