Descriptions Component Layout#

Overview#

The Descriptions component renders its content inside a two-level DOM structure: an outer wrapper div (.ant-descriptions-view) and an inner <table>. The CSS on this pair has been carefully tuned to handle two conflicting layout contexts — max-content ancestors (e.g. Table with scroll={{ x: 'max-content' }}) and shrink-to-fit containers (e.g. Popover, tooltips, or other overlay components that size themselves to their content).

Current Layout Strategy#

As of the fix in PR #58583 (released in antd ≥ 6.4.5), the style definition sets:

• .ant-descriptions-view: width: 100% — keeps the wrapper measurable and ensures it fills its container in normal flow and in shrink-to-fit containers like Popover.
• table (inner): min-width: 100% + tableLayout: fixed — prevents the table from shrinking below the wrapper's width while also preventing it from inflating beyond 100% of the resolved container width.

The tableLayout: fixed rule is critical: it forces the browser to derive column widths from the first row, ignoring cell content, giving predictable equal-width column distribution.

Note: The bordered variant overrides tableLayout back to auto 1, allowing columns to size themselves by content rather than equal distribution.

Layout History and the Two-Fix Sequence#

Issue #54268 — Table width explosion in max-content ancestors#

When Descriptions is nested inside a Table that uses scroll={{ x: 'max-content' }}, the browser's max-content layout pass has no resolved percentage base for width: 100% on the inner table. Combined with table-layout: fixed, the browser and the percentage amplify each other, inflating the table width to ~500,000 px.

Fix (PR #58203, antd 6.4.4): Changed .ant-descriptions-view to width: 0; min-width: 100%. This gave the wrapper zero intrinsic width during the max-content pass while keeping it full-width in normal flow.

Issue #58574 — Content column collapse inside Popover#

The width: 0 intermediate fix introduced a regression: inside shrink-to-fit containers like Popover, the wrapper's zero intrinsic width — combined with table-layout: fixed — caused the browser to distribute column widths as near-zero, collapsing content cells to roughly one character wide 2.

Fix (PR #58583, antd ≥ 6.4.5): Restored .ant-descriptions-view to width: 100%, and moved the constraint from the wrapper to the inner table: min-width: 100% (instead of width: 100%). This keeps the wrapper measurable in shrink-to-fit contexts while preventing the table from inflating under max-content measurement 3.

Column Width Distribution#

Under table-layout: fixed, the browser assigns column widths based on the <col> elements or the first row's cells — not cell content. The Descriptions component does not emit explicit <col> width attributes, so all columns receive equal shares of the table width. The content item cells have min-width: 1em set on the item container as a floor to prevent full collapse.

Key Source Files#

Debugging Tips#

• If columns collapse to near-zero in an overlay (Popover, Tooltip, Drawer): check that you are on antd ≥ 6.4.5. The workaround for older versions is to set .ant-descriptions-view { width: 100%; } via style or className.
• If a Descriptions inflates to an extreme width inside Table scroll={{ x: 'max-content' }}: confirm the inner table has min-width: 100% (not width: 100%) in the computed styles — this is the post-PR-#58583 behavior.
• The bordered variant uses table-layout: auto and is not affected by fixed-layout column distribution issues 1.