Overflow Issues with Flexbox

marijnh commented

2016-07-30 12:32:59 +02:00

(Migrated from gitlab.com)

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

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

marijnh commented

2016-07-30 12:33:33 +02:00

(Migrated from gitlab.com)

changed title from {-Flexbox -}Overflow Issues to Overflow Issues{+ with Flexbox+}

changed title from **{-Flexbox -}Overflow Issues** to **Overflow Issues{+ with Flexbox+}**

marijnh commented

2016-08-01 21:54:39 +02:00

(Migrated from gitlab.com)

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

marijnh commented

2016-08-15 12:25:47 +02:00

(Migrated from gitlab.com)

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).

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).

marijnh commented

2016-08-15 15:32:58 +02:00

(Migrated from gitlab.com)

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.

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.

marijnh commented

2017-07-25 20:19:55 +02:00

(Migrated from gitlab.com)

Having this same issue when using with Bulma.

marijnh commented

2017-07-29 01:33:19 +02:00

(Migrated from gitlab.com)

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.

I can reproduce the issue with Firefox. I further reduced your CSS to ```css .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 commented

2017-08-06 07:39:37 +02:00

(Migrated from gitlab.com)

mentioned in issue #3547

marijnh commented

2017-08-06 07:42:32 +02:00

(Migrated from gitlab.com)

mentioned in issue #4895

marijnh commented

2017-08-06 07:43:26 +02:00

(Migrated from gitlab.com)

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

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

marijnh commented

2019-03-07 04:24:23 +01:00

(Migrated from gitlab.com)

mentioned in issue #745

marijnh commented

2020-04-23 14:15:57 +02:00

(Migrated from gitlab.com)

mentioned in issue #6241

marijnh commented

2022-06-04 21:56:26 +02:00

(Migrated from gitlab.com)

For me, the issue was fixed using "overflow:auto" for the container of codemirror react component, and "flex:1" for all the components of the flex container, including codemirror.

marijnh (Migrated from gitlab.com) closed this issue

2024-08-24 02:53:39 +02:00

Rows
Columns

Overflow Issues with Flexbox #4142