CSS网格一列，如果其他行较少，则具有最大高度，但是如果其他行较大，则将其调整为较高高度

Question

我有一个简单的CSS网格，我希望第3列具有特殊的自动高度调整功能。网格样式为：

.grid{
        display:grid;
        grid-template-columns: 7fr 10fr 15fr;
        border-top: 1px solid black;
        border-right: 1px solid black;
    }
    .grid > span{
        padding: 4px 4px;
        border-left: 1px solid black;
        border-bottom: 1px solid black;
    }

span元素是：

<span class="new_data" style="">...........</span>
<span class="new_data" style="">............</span>
<span class="new_data" style="max-height: 400px; overflow: auto;">................</span>

DETAILS列可以短也可以长。希望此列具有以下高度相互作用：

1. 短时-行高适应内容-确定（第二行示例）。

2. 非常长时-使用滚动条将行高调整为最大400px-确定（第一行和第四行）

3. 当前两列的高度超过400像素时，如果需要，我希望“详细信息”列自动增长到400像素以上，以使用滚动条将其他两列的高度进行匹配-现在不做案例（第三行）。发生这种情况时，“详细信息”高度固定为400像素，并且下方存在明显的间隙。希望这种情况发生时自动增长到行的高度。

如何实现？欢迎使用Javascript / Jquery解决方案。

Answer 1

[纯CSS解决方案将height:450px;和min-height:100%的组合

在这种情况下，百分比是指网格行的高度而不是网格容器的高度，网格容器的高度将由该行中的最高元素定义。

/* Not needed for the solution */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body * {
  padding: 10px;
  border: 1px solid;
}


/* Not needed for the solution */


/* The solution */

[grid] {
  display: grid;
  grid-template-columns: 7fr 10fr 15fr;
  border-top: 1px solid black;
  border-right: 1px solid black;
}

[details] {
  height: 450px;
  min-height: 100%;
  overflow: auto;
}

<div grid>
  <div flag>
    Lorem ipsum dolor sit amet, consectetur epteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div content>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
  </div>
  <div details>
    I'm at least 450px tall
  </div>
  <div flag>
    Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing 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 cillumLorem
    ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing 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 dolo
  </div>
  <div content>
    Lorem ipsum dolor sit
  </div>
  <div details>
    I'm as tall as my tallest sibling.
  </div>
</div>