CSS - 导致溢出的网格[重复]

Question

我正在尝试使用 CSS 网格功能制作一个 2 列的网站。我也在努力使其适合移动设备。

我有什么工作，但它会导致小型设备上的溢出：

<style>
#wrapper {
	display: grid;
	grid-template-columns: minmax(275px, 25%) 75%;
}
</style>

<div id="wrapper">
   <div>One</div>
   <div>Two</div>
</div>

我希望第一列（菜单）的最小宽度为 275px，宽度为 25%，第二列可以占据整个页面（我尝试使用 75%）。

不知何故，它不灵活地根据窗口调整自己。

我怎样才能做到不发生溢出？

Answer 1

使用1fr 代替75%。

fr 是小数单位，1fr 是可用的 1 部分 空间。

<style>
#wrapper {
  display: grid;
  grid-template-columns: minmax(275px, 25%) 1fr;
}
</style>

<div id="wrapper">
   <div>One</div>
   <div>Two</div>
</div>