Управляйте высотой ячейки в сетке CSS для вертикально охватывающей ячейки, чтобы использовать минимальное пространство - PullRequest
Новая
       6

Управляйте высотой ячейки в сетке CSS для вертикально охватывающей ячейки, чтобы использовать минимальное пространство

0 голосов
/ 16 апреля 2020

Как я могу получить левую охватывающую ячейку ниже сетки, чтобы использовать минимальную высоту, заданную правыми тремя ячейками? В этом случае я хочу, чтобы содержимое левой ячейки можно было прокручивать. В моей текущей настройке левая ячейка доминирует над высотой ячейки и растягивает правые ячейки. 

div {
  border: 1px dotted gray;
}
.scrollable {
  height: 100%;
  overflow-y: auto;
}
.grid {
  width: 300px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "cell1 cell2"
                       "cell1 cell3"
                       "cell1 cell4";
}

.cell1 {
  grid-area: cell1;
}
.cell2 {
  grid-area: cell2;
}
.cell3 {
  grid-area: cell3;
}
.cell4 {
  grid-area: cell4;
}
<div class="grid">
  <div class="cell1">
    <div class="scrollable">
    Line 1<br />
    Line 2<br />
    Line 3<br />
    Line 4<br />
    Line 5<br />
    Line 6
    </div>
  </div>
<div class="cell2">Cell 2</div>
<div class="cell3">Cell 3</div>
<div class="cell4">Cell 4</div>
</div>
...