网格/卡片内容中的高度相等

Question

我有一个非常简单的测试页

<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>

（并且主体也设置为100％，因此它将填充整个视口）

[第三张卡片中没有任何内容，高度都相等，看起来不错。当我开始向其中添加内容时，它会扩展并占用第二张卡片的空间。

我想做的是强迫它们具有相等的高度，即使其中只有一个内容。

有什么建议吗？ （我假设它与flexbox有关，但我无法确定该问题）

Answer 1

OP的自定义Chrome hack：添加flex-basis: 0会保留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>

Answer 2

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

这将拉伸所有伸缩项目/子组件以填充容器。