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.

Height of 100% doesn't work with flex-grow parent on Safari/macOS.

See original GitHub issue

Hello CodeMirror Team. Thanks for an amazing open-source project! ❤️

Bug details:

This bug was tested with CodeMirror versions 5.48 and 5.49. The parent of the editor is sized with flex-grow. The editor size is set with editor.setSize("100%", "100%");.

The editor doesn’t fill the parent on Safari (v13.0.3, macOS 10.14.6). It works fine on Firefox and Chrome.

Here’s a link to a reproduction of the problem: https://jsfiddle.net/f2xwdkro/

Issue Analytics

State:
Created 4 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

marijnhcommented, Nov 1, 2019

No, the CodeMirror wrapper div expects to be display: block. You’ll probably need to add another intermediate wrapper element to work around this.

Going to close this, since I don’t know of a credible way to work around the Safari bug on the CodeMirror side.

0reactions

kssreeramcommented, Nov 2, 2019

Btw, the intermediate wrapper idea worked well. Thanks.

#wrapper2 { position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

I added wrapper2 as child of the flexbox element and CodeMirror as a child of wrapper2.

Edit: The flexbox element should be set to position: relative to contain wrapper2.

Top Results From Across the Web

Height of 100% doesn't work with flex-grow parent on Safari ...

The editor doesn't fill the parent on Safari (v13.0.3, macOS 10.14.6). It works fine on Firefox and Chrome. Here's a link to a...

Chrome / Safari not filling 100% height of flex parent

Solution. Use nested flex containers. Get rid of percentage heights. Get rid of table properties. Get rid of vertical-align . Avoid absolute positioning....

100% height doesn't work within a flex item in a flexbox

I have the same issue, basically, if the size of element is affected by flexgrow flexshrink or stretch. then its children's percentage size...

flex-grow - CSS: Cascading Style Sheets - MDN Web Docs

This property specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor)....

Safari Technology Preview Release Notes - Apple Developer

Updates to Safari Technology Preview are no longer available for macOS Big Sur. If you already have Safari Technology Preview installed, you can...