在网格/卡片内容中强制等高

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>

（body 也设置为 100%，以便它填满整个视口）

第三张卡片没有任何内容，这都是等高的，看起来不错。当我开始向其中添加内容时，它会扩展并从第二张卡片中获取 space。

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

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

Answer 1

您可以将 flex:1 添加到卡片，告诉它根据可用高度收缩和增长。添加了自定义 class 以便它与语义 UI 的代码分开。

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

将以下 css 添加到卡片元素的直接父级。

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

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

在网格/卡片内容中强制等高

Force equal height in grid / card content

flexbox

semantic-ui