Question

所以我的网格中有2个div。第一个div可以很小也可以很大，但绝对不能超过屏幕尺寸。第二个div的固定大小为40px。

因此，第一个div应该是

屏幕尺寸-40像素
内容的大小（如果小于1）

超出screen size - 40px限制的内容将显示在overflow: scroll上。

.outer__grid {
  display: grid;
  grid-template-rows: 200px;
  grid-template-columns: 1fr 250px;
}

.content__one {
  width: 3000px;
  overflow: scroll;
  background-color: red;
}

.content__two {
  width: 40px;
  background-color: blue;
}

<div class="outer__grid">
  <div class="content__one"></div>
  <div class="content__two"></div>
</div>

采用这种方法，第一个div永远不会溢出，因此宽度为3000px。

我创建了一个简单的JSFiddle以使用代码https://jsfiddle.net/n9851dzm/7/

表达我的问题。

Answer 1

我对您的html进行了一些更改，并根据它重写了CSS。请检查一下：

HTML：

<div class="outer__grid">
  <div class="content__one">
    <<div class="inner-content">Inner Content</div>
  </div>
    <div class="content__two">

  </div>
</div>

CSS：

.outer__grid {
  display: grid;
  grid-template-rows: 200px;
  grid-template-columns: 1fr 40px;
  max-width: 100%;
  overflow:hidden;
}

.content__one {
  overflow: auto;
  background-color: red;
}
.inner-content {
  width: 3000px;
}

.content__two {
  background-color: blue;
}

Answer 2

如何使用Flex满足您的要求

<div class="outer__grid">
  <div class="content__one">
  <div class="long__content"> </div>
  </div>
    <div class="content__two">

  </div>
</div>

以及随后的CSS

.outer__grid {
  display: flex;
    justify-content: space-around;
    align-items: stretch;
    width: 100%;
}

.content__one {
  overflow: scroll;
  background-color: red;
  height: 200px;
  width:100%;
  padding: 10px;
}

.content__two {
  width: 40;
  flex: 0 0 40px;
  background-color: blue;
  height:200px;

}

.long__content {
  width: 3000px;
  height: 180px;
  background-color: grey;
}

检出fiddle

如何防止网格布局div导致视口溢出？

2 个答案: