html - 如何让两个子div的高度彼此相同

Question

我需要使两个 .tinted-container 彼此高度相同(如果可能使用 CSS)但每个都在一个网格列下。

• 我无法为网格列着色，因为它们使用填充来创建 排水沟，如果有色容器之间没有空白 我给背景着色。
• 这是一个基于 % 的网格，因此为两者都添加边距 列的宽度超过 100%。

<div class="grid-row">
      <div class="grid-column-half">
        <div class="tinted-container">
          <p>Taller</p>
          <p>column</p>
          <p>on</p>
          <p>left</p>
        </div>
      </div>

      <div class="grid-column-half">
        <div class="tinted-container">
          <p>This container should be the same height as the other one.</p>
        </div>
      </div>
    </div>

如何使容器高度相同？

Answer 1

Flexbox 可以做到这一点:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.grid-row {
  display: flex;
}
.grid-column-half {
  border: 1px solid grey;
  width: 50%;
  padding: 10px
}
.tinted-container {
  height: 100%;
  background: pink;
}

<div class="grid-row">
  <div class="grid-column-half">
    <div class="tinted-container">
      <p>Taller</p>
      <p>column</p>
      <p>on</p>
      <p>left</p>
    </div>
  </div>

  <div class="grid-column-half">
    <div class="tinted-container">
      <p>This container should be the same height as the other one.</p>
    </div>
  </div>
</div>