CSS 网格仅在其中一行出现溢出

Question

我不确定 CSS 显示网格是否可行，但我希望网格中的一行具有垂直溢出，而另一行则没有。

.container {
  box-sizing: border-box;
  height: 350px;
  max-width: 300px;
  border: 3px dotted gray;
  overflow: hidden;
  display: grid;
  grid-template-areas: 'item-a' 'item-b';
  grid-template-rows: 1fr 120px;
  grid-template-columns: 200px;
  background-color: grey;
  .item-a {
    grid-area: item-a;
    border: 3px dotted green;
    overflow-x: auto;
    overflow-y: hidden;
    width: 600px;
    background-color: green;
  }
  .item-b {
    grid-area: item-b;
    border: 3px dotted yellow;
    background-color: yellow;
  }
}

<div class="container">
  <div class="item-a">
    Grid child 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat, tortor ut luctus semper, turpis dui consequat ipsum, vitae gravida nunc purus non arcu. Proin congue, turpis eget tempor tristique, turpis eros lobortis nibh, lobortis
    suscipit nisi mi ut dolor. Duis aliquam interdum ipsum. Aenean id metus quis quam mollis interdum. Curabitur vel lectus a quam mollis consequat. Sed auctor efficitur viverra. Aenean iaculis enim diam, eget sodales augue consequat volutpat. Praesent
    placerat mi diam, sed elementum lacus eleifend in. Nulla sit amet dolor at tortor aliquet semper. Integer et sodales elit, quis pulvinar felis. Suspendisse et sodales ipsum. Aenean sem quam, tempor a metus sed, malesuada aliquet sapien. Nullam aliquam
    magna at congue sollicitudin.
  </div>

  <div class="item-b">
    Grid Child 2
  </div>
</div>

这个想法是仅在绿色框的底部有一个水平滚动。 我可以将滚动添加到容器中，但这也会滚动黄色框的内容，而我不希望这样。

我还可以更改 HTML 和 CSS 的结构，并使用 flex 来实现结果，但这会对我正在创建的实际解决方案添加一些其他影响。

浏览 Stackoverflow 和 Google，我只能找到垂直滚动的问题和解决方案。我尝试应用相同的想法来设置特定的宽度，但在不同的组合之后，我找不到一个能产生我想要的结果的方法。

小提琴版本可以在这里找到：https://jsfiddle.net/esantiagovieira/dkv06zmw/

Answer 1

我找到了你想要做的解决方案。

.container{
  box-sizing: border-box;
  height: 350px;
  max-width: 300px;
  border: 3px dotted gray;
  overflow: hidden;
  display: grid;
  grid-template-areas:
  'item-a'
  'item-b';
  grid-template-rows: 1fr 120px;
  grid-template-columns: 200px;
  background-color: grey;
  
  .item-a{
    grid-area: item-a;
    border: 3px dotted green;
    overflow-x: scroll;
    overflow-y: hidden;
   width:600px;
    background-color: green;
  }
  
  .item-a >div{
     width: 800px;
  }
  
  .item-b{
    grid-area: item-b;
    border: 3px dotted yellow;
    background-color: yellow;
  }
}

<div class="container">
  <div class="item-a">
    <div>
    Grid child 1:
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat, tortor ut luctus semper, turpis dui consequat ipsum, vitae gravida nunc purus non arcu. Proin congue, turpis eget tempor tristique, turpis eros lobortis nibh, lobortis suscipit nisi mi ut dolor. Duis aliquam interdum ipsum. Aenean id metus quis quam mollis interdum. Curabitur vel lectus a quam mollis consequat. Sed auctor efficitur viverra. Aenean iaculis enim diam, eget sodales augue consequat volutpat. Praesent placerat mi diam, sed elementum lacus eleifend in. Nulla sit amet dolor at tortor aliquet semper. Integer et sodales elit, quis pulvinar felis. Suspendisse et sodales ipsum. Aenean sem quam, tempor a metus sed, malesuada aliquet sapien. Nullam aliquam magna at congue sollicitudin.
     </div>
  </div>

  <div class="item-b">
    Grid Child 2
  </div>
</div>

您正在尝试制作绿盒子水平滚动。

我认为这可能有用

Answer 2

对于您的示例，它不起作用，因为元素中的默认

text-wrap

值是

wrap

。这样你的 div 中的文本就会结束。这就是为什么您的 green

div

元素中没有水平滚动条。

要解决您的问题，您需要将 CSS 属性

text-wrap: nowrap

添加到您的

.item-a

类样式中。

此外，如果您的

item-a

div 中有一个宽度大于它的块类型元素，那么您的代码已经可以工作了。我想如果举个例子你会更好地理解。这是您的代码的修改示例：

.container{
  box-sizing: border-box;
  height: 350px;
  max-width: 300px;
  border: 3px dotted gray;
  overflow: hidden;
  display: grid;
  grid-template-areas:
  'item-a'
  'item-b';
  grid-template-rows: 1fr 120px;
  grid-template-columns: 200px;
  background-color: grey;
  }
  .item-a{
    grid-area: item-a;
    border: 3px dotted green;
    overflow-x: auto;
    overflow-y: hidden;
    width: 600px;
    background-color: green;
  }
  .child-block-elem {
   background-color: pink;
   width: 1000px;
   display: block;
  }
  
  .item-b{
    grid-area: item-b;
    border: 3px dotted yellow;
    background-color: yellow;
  }

<div class="container">
  <div class="item-a">
    Grid child 1:
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat, tortor ut luctus semper, turpis dui consequat ipsum, vitae gravida nunc purus non arcu. Proin congue, turpis eget tempor tristique, turpis eros lobortis nibh, lobortis suscipit nisi mi ut dolor. Duis aliquam interdum ipsum. Aenean id metus quis quam mollis interdum. Curabitur vel lectus a quam mollis consequat. Sed auctor efficitur viverra. Aenean iaculis enim diam, eget sodales augue consequat volutpat. Praesent placerat mi diam, sed elementum lacus eleifend in. Nulla sit amet dolor at tortor aliquet semper. Integer et sodales elit, quis pulvinar felis. Suspendisse et sodales ipsum. Aenean sem quam, tempor a metus sed, malesuada aliquet sapien. Nullam aliquam magna at congue sollicitudin.
    <div class="child-block-elem">A child block element</div>
  </div>

  <div class="item-b">
    Grid Child 2
  </div>
</div>

我希望这有帮助！