Gutter CSS width vs. initialSpacer

If I use only initialSpacer for my gutter (no CSS width), then when the editor’s contents get too wide, the editor and the gutter overlap. CSS width can stop that from happening. But if I’m using CSS width, then what’s the point of initialSpacer? I’d prefer an initialSpacer-only solution since that will adapt to any structural changes I might make to the gutter in the future. The CSS width solution is just me eyeballing it to be about right.

Here it is with initialSpacer only and the editor’s contents not very wide:

and same code once I’ve added enough width to the contents:


and adding CSS width:

In the second screenshot the editor pane has widened and encroached into the gutter. Is this supposed to happen with initialSpacer? If so, and if CSS width is the solution, then what’s the point of initialSpacer?

Thank you!


The gutter and the content are part of the same display: flex parent, so they should not overlap. Rather, this looks like the content is somehow not causing the gutter container to grow. Is there a width property of some kind on the gutter, or a position: absolute on the gutter text?