如何使容器取决于一列的高度并限制另一列的高度？

Question

我在这里：

document.querySelector("button").addEventListener("click", function(){
  var height = document.querySelector("#content1").getBoundingClientRect().height;
  document.querySelector("#my_grid").style.height = height + "px";  
  setTimeout(arguments.callee, 1);
});

#my_grid {
  display:grid;
  grid-template: "a b" auto /
              100px 100px;
  background-color:green;
  width:200px;
}

#col1 {
  grid-area:a;
  background-color:red;

}

#col2 {
  grid-area:b;
  background-color:yellow;
  overflow:auto;
}

<div id="my_grid">
  <div id="col1">
    <div id="content1">I want to set the height with my content!</div>
  </div>
  <div id="col2">I want to follow the height and spawn a scrollbar if I'm too short.</div>
</div>
<br><br>
<button>crappy JavaScript solution</button>

每列中的内容量是动态的。

我不喜欢出于样式目的而运行超时循环的想法。

我真的不希望从结构上将从属列放在主列中，因为这需要大量重写。

有CSS解决方案吗？

Answer 1

如果您愿意使用不使用css网格的解决方案，那么这里的位置为absolute。

#my_grid {
  position: relative;
  background-color:green;
  width:200px;
}

#col1 {
  background-color:red;
  width: 100px;
}

#col2 {
  background-color:yellow;
  overflow:scroll;
  width: 100px;
  position: absolute;
  height: 100%;
  right: 0;
  top: 0;
}

<div id="my_grid">
  <div id="col1">
    <div id="content1">I want to set the height with my content!</div>
  </div>
  <div id="col2">I want to follow the height and spawn a scrollbar if I'm too short.</div>
</div>