한 열은 다른 열의 높이를 제어

한 열이 내용에 관계없이 다른 열의 높이를 제어하도록 만듭니다.

아래에서는 왼쪽 열이 오른쪽 열을 제어합니다.

JavaScript는 필요하지 않습니다. CSS 세 줄만 있으면 됩니다.

 

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.grid .left {/*nothing here*/}
.grid .right {
  height: 0;
  min-height: 100%;
  overflow: auto;
}