带有CSS的网格内的滚动条，使用CSS网格

Question

我有一个HTML页面，我不想在主体范围内滚动，但是，当使用嵌套的CSS网格时，即使嵌套网格中的内容溢出，我也无法控制主体的滚动条。属性在溢出时滚动。我在下面提供的代码片段中有一个包含网格的容器，它包含一个称为工作区的网格区域，该区域具有一个也是CSS网格的组件。该组件具有迫使整个身体滚动的内容，而我只希望内容滚动。我尝试弄乱高度到100％和100vh，但没有这种运气。

body, html {
  margin: 0px;
}


.container {
  background-color: #282828;
    color: whitesmoke;
    display: grid;

    grid-template-columns: 1fr min-content;
    grid-template-rows: 42px 1fr;
    grid-template-areas: 
        'tabs sidebar'
        'workspace sidebar';
    height: 100vh;
}

.tabs {
    grid-area: tabs;
    background-color: violet; 
}

.sidebar {
    grid-area: sidebar;
    background-color: tomato;
    min-width: 50px;
}

.workspace {
    grid-area: workspace;
    background-color: blue;
}

.component {
  display: grid;
  grid-template-columns: 1fr;
    grid-template-rows: min-content 1fr;
    grid-template-areas: 
        'header'
      'content';
}

.header {
  grid-area: header;
}

.content {
  grid-area: content;
  overflow-y: scroll;
}

<div class="container">
  <div class="tabs">
  </div>
  <div class="sidebar">
  </div>
  <div class="workspace">
     <div class="component">
       <div class="header">
         <h1>My header</h1>
       </div>
       <div class="content">
          <h1>Temp</h1>
        <h1>Temp</h1>
    <h1>Temp</h1>
    <h1>Temp</h1>
    <h1>Temp</h1>
    <h1>Temp</h1>
    <h1>Temp</h1>
    <h1>Temp</h1>
    <h1>Temp</h1>
    <h1>Temp</h1>
    <h1>Temp</h1>

       </div>
       
       
    </div>
    
  </div>  
</div>

Answer 1

要使用滚动条，容器的高度应超过内容的高度，然后滚动条将被激活，因此无论何时要使用滚动条，都必须牢记容器的边框应以某种方式定义。