home / samples / Editor Sizing

Editor Sizing

By default, the editor auto-fits to its container. Use h to fix the number of visible rows.

1. Auto-h, auto-w (recommended)

.buffee { width: 960px; height: 300px; padding: 20px; }

new Buffee(el, {})

Default behavior: auto-fit h and w. Drag bottom-right to resize.

2. Fixed-h, auto-w

.buffee { width: 640px; padding: 20px; }

new Buffee(el, { h: 8 })

Fixed 8 rows, columns auto-calculated from width. Drag to resize width.

3. h smaller than container

.buffee { height: 400px; padding: 20px; }

new Buffee(el, { h: 5 })

Container is 400px tall, but editor only shows 5 rows. h takes precedence instead of autofill remaining space.

4. h larger than container (clipped)

.buffee { height: 400px; padding: 20px; overflow: hidden; }

new Buffee(el, { h: 20 })

Container is 400px tall, but h requests 20 rows. Use overflow: hidden to clip.

5. h larger than container (scrollable)

.buffee { height: 400px; padding: 20px; overflow: scroll; display: block; }

new Buffee(el, { h: 20 })

Container is 400px tall, but h requests 20 rows. Use overflow: scroll and display: block to scroll.

6. Auto-h, fixed-w (status bar stretches)

.buffee { height: 300px; padding: 20px; }

new Buffee(el, { w: 40 })

Fixed 55 columns, rows auto-calculated from height. Note: status bar stretches to container width while content is narrower.

7. Auto-h, fixed-w (fit-content)

.buffee { height: 300px; padding: 20px; width: fit-content; }

new Buffee(el, { w: 40 })

Same as example 6, but with width: fit-content so the container shrinks to match content width.

8. Auto-h, fixed-w (contain: inline-size)

.buffee { height: 300px; padding: 20px; width: fit-content; }

.buffee-status { contain: inline-size; }

new Buffee(el, { w: 20 })

When w is small, status line content may be wider than editor. Use contain: inline-size on status bar so gutter + lines determine container width.