Flank

wf-flank is a two-child asymmetric layout. The first child anchors at its natural size while the last child grows to fill all remaining space. When the growing child would shrink below --wf-content-percentage it wraps to its own row — no breakpoints required. wf-flank-end reverses the roles: the last child anchors and the first child grows.

Basic Flank

Anchor Left, Content Right

The first child stays at its natural size. The last child takes all remaining width.

Anchor

Growing content area

<div class="wf-flank">
  <div>Anchor</div>
  <div>Growing content</div>
</div>

Flank End

Content Left, Anchor Right

wf-flank-end reverses the roles. The first child grows, and the last child anchors — useful for action buttons or badges that should sit at the trailing edge.

Growing content area

Anchor

<div class="wf-flank-end">
  <div>Growing content</div>
  <div>Anchor</div>
</div>

Custom Anchor Size

Fixed Anchor Width

Set --wf-flank-size to a length to pin the anchor instead of letting it shrink to its content.

Anchor pinned to 8rem

8rem

Growing content

Anchor pinned to 16rem

16rem

Growing content

<div class="wf-flank" style="--wf-flank-size: 12rem;">
  <div>Anchor</div>
  <div>Growing content</div>
</div>

Fixed Anchor — Flank End

The same property pinning the trailing anchor on wf-flank-end .

Growing content

10rem

<div class="wf-flank-end" style="--wf-flank-size: 10rem;">
  <div>Growing content</div>
  <div>Anchor</div>
</div>

Wrap Threshold

Controlling When Content Wraps

--wf-content-percentage sets the minimum width of the growing child as a fraction of the container. A smaller value keeps the layout side-by-side longer; a larger value causes it to wrap sooner.

Wraps below 30% — stays side-by-side longer

Anchor

Content wraps at 30%

Wraps below 70% — wraps sooner

Anchor

Content wraps at 70%

<div class="wf-flank" style="--wf-content-percentage: 30%;">
  <div>Anchor</div>
  <div>Content</div>
</div>

<div class="wf-flank" style="--wf-content-percentage: 70%;">
  <div>Anchor</div>
  <div>Content</div>
</div>

Gap

Custom Gap Between Anchor and Content

Use --wf-flank-gap to set a gap that is independent of any outer wf-gap-* utility — useful when a flank sits inside another layout container that already carries a gap variable.

--wf-flank-gap: var(--wf-space-2)

Anchor

Content

--wf-flank-gap: var(--wf-space-8)

Anchor

Content

<div class="wf-flank" style="--wf-flank-gap: var(--wf-space-2);">
  <div>Anchor</div>
  <div>Content</div>
</div>

Class Reference

All modifier classes available on .wf-flank

Class / Property	Type	Description
wf-flank	Base	The first child anchors (auto width), the last child grows to fill the remaining space.
wf-flank-end	Base	Last child anchors (auto width), the first child grows to fill the remaining space.
--wf-flank-size	Property	Intrinsic size of the anchor child. Default: auto . Set to a fixed length (e.g. 12rem ) to pin the anchor width.
--wf-content-percentage	Property	Minimum width of the growing child before it wraps to its own row. Default: 50% .
--wf-flank-gap	Property	Gap between anchor and content. Default: var(--wf-space-4) . Independent of outer wf-gap-* utilities.