Editor height expands infinitely in Svelte/Tailwind Flexbox layout, despite "height: 100%"

v6
1

Hello everyone,

I’m having some trouble constraining the height of my CodeMirror 6 editor within a modern web app stack, and I’m hoping someone might be able to spot what I’m missing.

The Problem:

My editor is placed inside a Flexbox container and is intended to fill all available vertical space (flex-grow). However, as I add more lines of content, the editor’s height expands infinitely, pushing the other UI elements off the screen instead of creating an internal scrollbar.

What I’ve Tried:

I’ve searched through the documentation and previous forum posts, and the recommended solution seems to be applying CSS to ensure the .cm-editor fills its parent and the .cm-scroller handles the overflow. I have added the following rules to my global app.css file:

.cm-editor {
  height: 100%;
}
.cm-scroller {
  overflow: auto;
}

Unfortunately, this doesn’t seem to have the desired effect in my project. When I inspect the DOM, it appears the .cm-editor element itself is still growing in height, rather than the .cm-scroller becoming scrollable within a fixed-height parent.

My Environment:

  • Framework: Tauri v2
  • UI Library: Svelte 5 (using runes)
  • Styling: Tailwind CSS v4 with tw-animate-css
  • UI Components: shadcn-svelte

Code Repository:

To make it easy to see the full picture, my entire project is available on GitHub:
GitHub - daiaji/tauri-markdown-converter

The most relevant files for this issue are:

  • The main layout component (Flexbox setup):
    frontend/src/lib/components/layout/MainLayout.svelte
  • The Svelte action initializing CodeMirror:
    frontend/src/lib/actions.ts
  • The global stylesheet where I added the CSS rules:
    frontend/src/app.css

I suspect there might be an interaction with Tailwind’s base styles, the Flexbox container’s properties (perhaps min-h-0 is missing somewhere?), or how I’m applying the editor to the DOM via a Svelte action that is causing this behavior.

Could anyone take a look and point me in the right direction? I feel like I’m close to the solution but am just missing a small detail.

Thanks in advance for any help