CODEWITHSUNDEEP
flexboxsemantic-ui
mortenoh
mortenoh

Reputation: 255

Force equal height in grid / card content

I have a very simple test page

<div class="ui two column stretched grid padded" style="height: 100%;">
  <div class="column">
    <div class="ui card fluid">
      <div class="content"></div>
    </div>
  </div>
  <div class="column">
    <div class="ui card fluid">
      <div class="content"></div>
    </div>
    <div class="ui card fluid">
      <div class="content">
        <h1>Content</h1>
        <h1>Content</h1>
        <h1>Content</h1>
      </div>
    </div>
  </div>
</div>

(and body is also set to 100%, so that it fill the entire viewport)

Without any content in the third card, this is all equal height, and looks good. When I start adding content to it, it expands and takes space from the second card.

What I'm trying to do, is to force them to have equal height, even when there is content in only one of them.

Any suggestions? (I'm assuming its related to flexbox, but I haven't been able to pin down the issue)

Upvotes: 0

Views: 4353

Answers (2)

Sameer Ingavale
Sameer Ingavale

Reputation: 2210

Add the following css to the direct parent of the card element.

.card-container { 
display: flex; 
align-items: stretch; 
}

This will stretch all the flex items/ child components to fill the container.

Upvotes: 0

m4n0
m4n0

Reputation: 32275

You can add flex:1 to the cards which tells it to shrink and grow according to the available height. Added a custom class so that it is separate from Semantic UI's code.

OP's custom Chrome hack: Adding flex-basis: 0 retains the original image height and width in Chrome.

.eq-card.ui.card {
  flex: 1; /* Shrink and grow according to available height */
  flex-basis: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.css" rel="stylesheet" />
<div class="ui two column stretched grid padded" style="height: 100%;">
  <div class="column">
    <div class="ui card fluid">
      <div class="content"></div>
    </div>
  </div>
  <div class="column">
    <div class="ui card fluid eq-card">
      <div class="content"></div>
    </div>
    <div class="ui card fluid eq-card">
      <div class="content">
        <h1>Content</h1>
        <h1>Content</h1>
        <h1>Content</h1>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions