[1AbdullahButt]

Description

• Remove flex-grow from .nav-overflow when its parent is a .card, .dialog, .drawer, or .flex-column.
• Skip this rule when the parent also has a row class, such as .md:flex-row or .flex-row. In a row, a wrapper that doesn't grow is 0px wide, and every item moves to "More".
• Add a docs section for other column parents: .flex-grow-0, or .flex-grow-0 .md:flex-grow-1 for a parent that changes direction.

Motivation & Context

• flex: 1 1 0 gives the wrapper its width in a row. In a column, it takes a share of the free height.
• CSS can't read the parent's direction, so no single rule on .nav-overflow works for both. This rule names the known column parents.
• The issue suggests growth only in .navbar. I didn't use it, because each plain .d-flex row would collapse to 0px until the author adds .flex-fill. This change has no effect on rows.
• .card and .dialog aren't in the issue. I added them because they show the same bug with a fixed height.
• These column parents still have the bug and need the documented class: custom CSS columns, .md:flex-column, .flex-column-reverse, and .lg:drawer below its breakpoint. A .flex-column with a row class also still has the bug while it is a column.
• [class*="-row"] also matches unrelated classes, such as .my-row. In that case the bug stays, but the nav doesn't collapse.

Height of the wrapper with a 38px nav, measured in Chromium at 1920×1080 with the compiled CSS and the JS bundle:

Parent	Before	After
.drawer	466px	38px
.flex-column.min-vh-100	516px	38px
.card, 600px high	247px	38px
.dialog, 600px high	243px	38px

• The next sibling now starts directly below the nav in all four cases. .flex-grow-1 on the wrapper still overrides the rule.
• These rows have the same wrapper size before and after, with no moved items: .d-flex, .d-flex.flex-wrap, .navbar, .flex-column.md:flex-row at 1920px, and .card.flex-row. A block parent also doesn't change.
• Items still move to "More" in a narrow .drawer.
• npm run lint exits 0 with 6 warnings and no errors. npm run css-test, npm run css, and npm run docs-build pass.
• I didn't test in Firefox or Safari. I didn't run the JS unit tests, because this change has no JS. The issue reports that .flex-grow-0 already works in Firefox, and this rule sets the same property.
• I added no automated test, because I found no layout tests for the SCSS in scss/tests.

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-43270--twbs-bootstrap.netlify.app/docs/6.0/components/nav-overflow/#in-a-column-flex-parent

Related issues

Fixes #43162

🤖 Generated with Claude Code