如何让子元素完全填充满Ant Design Card的100%宽度与高度？

问题根源 #

你给Card整体设置了100%高度，但Card内部的.ant-card-body容器默认没有继承高度，你只把它的padding设为0，没有指定高度规则，所以子div的height: 100%找不到父级高度参照，就会出现塌陷。

解决方案 #

分两种场景适配：

场景1：Card无头部（未配置title属性）

直接给bodyStyle加上height: 100%即可，修改后代码如下：

<Card 
  style={{ width: '100%', height: '100%', background: 'red'}} 
  headStyle={{ backgroundColor: '#E6ECF0' }} 
  bodyStyle={{ padding: 0, height: '100%' }} 
  type="inner"
>
  <div style={{height: '100%', width: '100%'}}>
  </div>
</Card>

场景2：Card有头部（配置了title属性）

如果有头部的话直接给body设100%高度会导致内容溢出，因为头部本身占了固定高度，这时候用flex布局更稳妥：

<Card 
  style={{ width: '100%', height: '100%', background: 'red', display: 'flex', flexDirection: 'column' }} 
  headStyle={{ backgroundColor: '#E6ECF0', flexShrink: 0 }} 
  bodyStyle={{ padding: 0, flexGrow: 1 }} 
  type="inner"
  title="卡片标题"
>
  <div style={{height: '100%', width: '100%'}}>
  </div>
</Card>

这样设置后，头部高度固定不收缩，body区域自动占满Card剩余高度，子元素设置100%高度就能正常填充整个body区域，不会出现塌陷也不会溢出。

内容的提问来源于stack exchange，提问作者Vlad