Search code examples
reactjsjsxantdant-design-prostyled-jsx

How to fill 100% of height and width of Ant Card?

I am trying to fill 100% of ANT card height but when I use height 100% for a child it collapses. Does anyone know how it's possible to do? I know for sure that ant Card isn't equal to 0% because its parent has height and width

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

  • In order to prevent collapsing you should add padding to your card and use box-sizing: border-box;

    <Card style={{ width: '100%', height: '100%', background: 'red', box-sizing:  'border-box'}} headStyle={{ backgroundColor: '#E6ECF0', }} bodyStyle={{padding: '5px'}} type="inner">
  <div style={{height: '100%', width: '100%'}}>
  </div>
</Card>