civilytics-reveal: .column { flex: 1 } ignores Quarto column widths #26

New Issue

2026-09-25T16:09:42-04:00

jared commented

2026-09-25 16:09:42 -04:00

Problem

Quarto column widths are ignored in civilytics-reveal. {.column width="60%"} and {.column width="40%"} both render as equal halves, so a chart meant to take 60% of the slide ends up at about 44% of slide width once the gap is subtracted.

Cause

civilytics.scss (extension 1.0.0, civilytics 0.3.1):

.reveal .column {
  flex: 1;
  min-width: 0;
}

flex: 1 sets flex-basis: 0 and equal grow, which overrides the inline width Quarto writes on each column.

Fix used in a deck (deck-local CSS)

.reveal .columns {
  gap: 1.5em;
}
.reveal .columns > .column {
  flex: 0 1 auto;
}

With flex: 0 1 auto the inline widths apply, and the columns shrink together to absorb the gap.

Notes for the upstream fix

Keep equal columns as the default when no width is given. For example, apply flex: 1 only to columns without an inline width, or use flex: 0 1 auto everywhere and let Quarto's default widths stand.
The theme's gap: 3em is wide once widths are honored. 1.5em worked for a 60/40 chart-plus-bullets layout.
The hand-rolled .two-col grid is unaffected.

## Problem Quarto column widths are ignored in `civilytics-reveal`. `{.column width="60%"}` and `{.column width="40%"}` both render as equal halves, so a chart meant to take 60% of the slide ends up at about 44% of slide width once the gap is subtracted. ## Cause `civilytics.scss` (extension 1.0.0, civilytics 0.3.1): ```scss .reveal .column { flex: 1; min-width: 0; } ``` `flex: 1` sets `flex-basis: 0` and equal grow, which overrides the inline `width` Quarto writes on each column. ## Fix used in a deck (deck-local CSS) ```css .reveal .columns { gap: 1.5em; } .reveal .columns > .column { flex: 0 1 auto; } ``` With `flex: 0 1 auto` the inline widths apply, and the columns shrink together to absorb the gap. ## Notes for the upstream fix - Keep equal columns as the default when no `width` is given. For example, apply `flex: 1` only to columns without an inline width, or use `flex: 0 1 auto` everywhere and let Quarto's default widths stand. - The theme's `gap: 3em` is wide once widths are honored. 1.5em worked for a 60/40 chart-plus-bullets layout. - The hand-rolled `.two-col` grid is unaffected.

jared added the

labels 2026-09-25 16:09:42 -04:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Civilytics/civilyticsR#26