Codemirror: Overflow Issues with Flexbox

[KnightYoshi]

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

[KnightYoshi]

Adding a max width or overflow to the .column also seems to fix the scrolling issue.

[marijnh]

I don't really understand the problem -- if I load your example in Chrome 50, the _editor_, not the page, gets a horizontal scrollbar. Could you expand a bit, and preferably also reduce the CSS and wrapping element structure in your demo the absolute minimum (right now the CSS is quite huge, too huge for me to read through).

[KnightYoshi]

That's interesting, I hadn't checked Chrome. View it in Firefox 47+ (not sure about earlier versions or other browsers). I removed a bunch of CSS - I just grabbed all of the grid CSS when I initially created it.

Removing the flexbox properties it behaves as expected in Firefox; the editor scrolls, not the page. Which isn't really an option for me. So uncommenting either one of the commented out blocks also fixes it so that the editor scrolls and not the page.

[kurtfunai]

Having this same issue when using with Bulma.

[adrianheine]

I can reproduce the issue with Firefox. I further reduced your CSS to

.CodeMirror {
  outline: 1px solid red;
}

.row {
  max-width: 75rem;
  display: flex;
  flex-flow: row wrap;
}

I also removed all loaded CSS and JS dependencies except codemirror.

[marijnh]

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