react ant design 卡片内容溢出详解及解决方案
本文分析在 React 项目中使用 Ant Design 卡片组件时，内容超出容器的问题，并提供有效的解决方案。
问题根源：父容器高度缺失
如上图所示，Ant Design 卡片组件通常嵌套在 <ant-row></ant-row> 元素内。然而，该 <ant-row></ant-row> 元素可能存在 height: 0px 的样式，导致其高度为零，无法容纳卡片内容，从而出现溢出。
解决方法：调整父容器高度
核心解决方法是修改或移除 <ant-row></ant-row> 元素的 height: 0px 样式，使其能够根据子元素（卡片组件）的高度自动调整。 您可以尝试以下几种方法：
-
移除 height 样式: 最直接的方法是直接从
<ant-row></ant-row>元素中移除height属性。 Ant Design 的<ant-row></ant-row>通常会根据内容自适应高度。 -
设置最小高度: 如果需要保证
<ant-row></ant-row>有一定的最小高度，可以设置min-height属性，例如min-height: 100px。 -
使用 flex 布局: 将
<ant-row></ant-row>元素设置为 flex 布局，并设置align-items: stretch，可以确保子元素撑开父元素的高度。
通过以上方法，您应该能够解决 Ant Design 卡片组件的内容溢出问题。 请检查您的 CSS 样式表，确保没有其他样式影响 <ant-row></ant-row> 元素的高度。
