I have a card which has a table nested inside it. The card expands as the table expands. However when the table has no data or a single entry, the card also shrinks. I want to set a minimum height to the card so that even if my table inside has just one entry or no entries , the card does not shrink. However it should expand when the table gets populated by more rows.

My code is as follows:

    const BaseCard = () =>
       <div id="card-containerBase">
       <Card
          style={{
          width: '100%',
          margin: 'auto',
          padding: '10px',
          backgroundColor: '#ECEFF1',
    }}
   >

I have a card which has a table nested inside it. The card expands as the table expands. However when the table has no data or a single entry, the card also shrinks. I want to set a minimum height to the card so that even if my table inside has just one entry or no entries , the card does not shrink. However it should expand when the table gets populated by more rows.

My code is as follows:

    const BaseCard = () =>
       <div id="card-containerBase">
       <Card
          style={{
          width: '100%',
          margin: 'auto',
          padding: '10px',
          backgroundColor: '#ECEFF1',
    }}
   >

• javascript
• css
• reactjs
• material-ui

• 2 Have you tried to set min-height on you card/table ? – Krusader Commented Oct 18, 2017 at 7:03
• Yeah this worked. Thanks! – SeaWarrior404 Commented Oct 18, 2017 at 7:07

2 Answers 2

just add the following style:

minHeight: '30vw'

As @Krusader points out, the minimum height can be set using min-height. However inside material UI Card styling the property should be set as minHeight. I set the parameter as:

    minheight: '30vw'