CSS 网格布局 - 仅针对部分内容的水平和垂直滚动

Question

我正在尝试创建一个布局，其中左侧有标签，顶部有标题，应该始终处于固定位置。在右边我有一些输入元素。如果输入元素溢出，则应该只有输入元素的水平和垂直滚动条（左侧标签和标题应保持不变）。出于其他一些原因，我只想使用带有 CSS 网格的解决方案。我试图让标题和左标签元素具有粘性，它有点工作，但我觉得有更优雅的解决方案。我在每个元素上显式设置了 grid-column 和 grid-row，然后将我的内容部分（我希望它是可滚动的）包装在一个跨越多行和多列的 div 中。现在，我怎样才能使这部分可滚动？我尝试在父/子元素上设置显式宽度/高度，我尝试过溢出：自动但没有任何效果。

HTML

<div class="root">
<div class="header">
Header
</div>

<label class="l1">leg1</label>
<label class="l2">leg2</label>

<label class="label1">Label1</label>
<label class="label11">Label11</label>
<label class="label2">Label2</label>

<div class="content">
<input class="input1" value="test1"/>
<input class="input2" value="test2"/>
<input class="input3" value="test3"/>
</div>


</div>

CSS

.root{
  display:grid;
  grid-template-columns: max-content max-content max-content;
}

.header{
  grid-column: 1 / span 3;
  background: blue;
}

div input{
  height:50px;
}



.content{
  grid-column: 3;
  grid-row: 2 / span 3;
  display: grid;
}

.l1{
  grid-column: 1;
  grid-row: 2 / span 2;
  background: yellow;
}
.l2{
  grid-column: 1;
  grid-row: 4;
  background: green;
}

.label1{
  grid-column: 2;
  grid-row: 2;
  background: teal;
}

.label11{
  grid-column: 2;
  grid-row: 3;
  background: pink;
}

.label2{
  grid-column: 2;
  grid-row: 4;
  background: red;
}

.input1{
 
}
.input2{
 
}

小提琴：

https://jsfiddle.net/kzu0gf4x/3/ -test1/test2/test3 在溢出时应该是可滚动的，所以如果我向下滚动我应该会看到标题，滚动条应该只在 div 上 class="content"

Answer 1

这有帮助吗？

/* Scrollbar Customization */

.root .body::-webkit-scrollbar {
  width: 10px;
}

.root .body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.root .body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}


/* Scrollbar Customization */

.root {
  display: grid;
  grid-template-columns: max-content max-content max-content;
  border: 1px solid;
  width: fit-content;
}

.header {
  grid-column: 1 / span 3;
  background: blue;
}

.root .body {
  display: grid;
  max-height: 130px;
  overflow-y: scroll;
  /* Give overflow-y: scroll to show always Vertical scrollbar */
  overflow-x: auto;
  grid-template-areas: "label b" "label b" "label b";
}

.labels {
  display: grid;
  grid-area: label;
}

.content {
  grid-column: 3;
  grid-row: 2 / span 3;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  max-width: 220px;
  overflow: auto;
  grid-area: b;
  height: fit-content;
}

.content .row {
  display: grid;
  width: 100%;
  grid-auto-flow: column;
}

div input {
  margin: 0;
  border: 1px solid rgb(218, 218, 218);
  outline: 0;
  padding: 21px 10px;
}

.l1 {
  grid-column: 1;
  grid-row: 1 / span 3;
  background: yellow;
}

.l2 {
  grid-column: 1;
  grid-row: 3;
  background: green;
}

.label1 {
  grid-column: 2;
  grid-row: 1;
  background: teal;
}

.label11 {
  grid-column: 2;
  grid-row: 2;
  background: pink;
}

.label2 {
  grid-column: 2;
  grid-row: 3;
  background: red;
}

<div class="root">
  <div class="header">
    Header
  </div>

  <div class="body">
    <div class="labels">

      <label class="l1">leg1</label>
      <label class="l2">leg2</label>

      <label class="label1">Label1</label>
      <label class="label11">Label11</label>
      <label class="label2">Label2</label>
    </div>
    <div class="content">
      <div class="row">
        <input class="input1" value="test1">
        <input class="input2" value="test2">
        <input class="input3" value="test3">
      </div>
      <div class="row">
        <input class="input1" value="test1.1">
        <input class="input2" value="test2.1">
        <input class="input3" value="test3.1">
      </div>
      <div class="row">
        <input class="input1" value="test1.2">
        <input class="input2" value="test2.2">
        <input class="input3" value="test3.2">
      </div>
    </div>

  </div>
</div>