如何使 CSS 网格列的最大高度成为最小列的高度？ [重复]

Question

是否可以配置 CSS 网格，使列的最大高度是最小列的高度？

例如：

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.grid > div {
  border: 1px solid red;
  padding: 15px;
}

p {
  margin: 0;
  padding: 0;
  overflow: auto;
}

<div class="grid">
  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>

  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </div>
</div>

我希望左列具有右列的高度（并且有滚动溢出）。我尝试了

grid-auto-rows

的不同配置，但无济于事。我不想设置固定高度。

Answer 1

使用脚本，您可以确定哪个是较长的列，然后设置其高度以匹配另一个列的高度。

document.querySelectorAll('.grid').forEach(e => {
  const col1 = e.querySelector('div:first-child')
  const col2 = e.querySelector('div:last-child')
  if (col1.scrollHeight > col2.scrollHeight)
    col1.style.height = col2.scrollHeight + 'px'
  else 
    col2.style.height = col1.scrollHeight + 'px'
})

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  align-items: start; /* prevent the smallest column stretching */
  margin-bottom: 3em;
}

.grid > div {
  border: 1px solid red;
  padding: 15px;
  width: 100%;
  overflow: auto;
  box-sizing: border-box;
}

p {
  margin: 0;
  padding: 0;
  overflow: auto;
}

<div class="grid">
  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>

  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </div>
</div>

<div class="grid">
  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </div>

  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>