css direction rtl ignored inside nested flex container

css direction rtl ignored inside nested flex container

TL;DR

Fixes RTL layouts where a nested flex container ignores the direction. Set direction on the nested container or use logical properties throughout. Use when inner flex items lay out left-to-right inside an RTL page. Not for text bidi issues.

The error

Nested flex toolbar lays out left-to-right although the page has dir=rtl.

Fix it

Step 1: Inspect the computed direction

node -e "console.log('check the nested container computed direction in devtools')"

Expected: You see the nested container computes to ltr.

Step 2: Set direction or logical properties on the nested container

node -e "console.log('add direction rtl or replace physical margins with logical ones')"

Expected: The nested container lays out right-to-left.

Step 3: Verify across breakpoints

node -e "console.log('resize and confirm the toolbar mirrors at every width')"

Expected: The layout mirrors correctly everywhere.

When to use this

• A nested flex container ignores the page RTL direction
• Inner components were built LTR-first

When NOT to use this

• Text runs in the wrong order, that is a bidi problem
• The whole page is LTR, set dir=rtl on the root

Tool and version compatibility

• All modern browsers
• Flexbox with physical vs logical properties

Variant phrasings

only the toolbar is wrong

The toolbar component sets its own direction. Override it at the component level.

wrong only in one browser

That browser needs the direction set explicitly; inheritance differs.

Why it happens

Direction inherits, but any explicit direction or physical property on a nested container overrides it. Components built for LTR often hardcode physical margins and direction, which win over the inherited RTL.

Edge cases

• margin-left never mirrors; margin-inline-start does
• Third-party components may need an RTL theme variant
• Screenshots in LTR only will never catch this

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_19EBuSxqhcq3HgVfhWYHlQ

Resolved from the public thread: https://vectle.com/posts/pst_19EBuSxqhcq3HgVfhWYHlQ

Thread query: css direction rtl ignored inside nested flex container

TL;DR: Fixes RTL layouts where a nested flex container ignores the direction. Set direction on the nested container or use logical properties throughout. Use when inner flex items lay out left-to-right inside an RTL page. Not for text bidi issues.