CodeMirror inside CSS Grid

1

Hi all,

I’m trying to use CM inside a CSS grid and it’s giving me problems.

If I put a CM inside an element, and set that element to “width:400px” in CSS then CM conveniently takes on the size of the parent.

But if I set “display: grid” on the parent, then CM grows as wide as the longest line of code, meaning it becomes wider than the width of the parent.

Has anybody else seen this? Have you found a solution? I have tried various combinations of justify and align contents on the grid, and various ways of setting widths and I just can’t get it to stay inside its parent.

Thanks!

2

You’ll have to wrap it in another container element, so that it has a width to work with. Grid (and flex has the same problem) seems to allow it to decide its own width, which isn’t something CodeMirror’s CSS was written for.

3

Thanks for your reply.

For anybody coming after me you can fix this by adding min-width: 0 on some elements.

In my case setting that on a grid cell that contained a CM within it fixed the problem.

The answer is from here: https://github.com/codemirror/CodeMirror/issues/4487#issuecomment-289632883

So in CSS you need to set a “minimum width” of zero to prevent an element from having unbounded width.

EVERYTHING IS FINE.

2 Likes
4

Although, you might want to consider if you want some other minimum width that’s a bit larger than zero. :slight_smile: Can’t see things that are zero-width.