Minimum Content Size In CSS Grid

约 331 字大约 1 分钟

2023-08-07

网格布局的最小内容大小： CSS 网格的子项具有默认的最小内容大小，即 auto 。这意味着，如果存在大于网格项的元素，它将溢出。

.wrapper {
  width: 250px;
  display: grid;
  grid-template-columns: 1fr 100px;
  grid-gap: 20px;
}

gridboxgridbox

由于左侧栏中的内容长度过宽，大于剩余的内容空间，导致了内容溢出。

为了解决这个问题，我们有三种不同的解决方案：

作为防御性 CSS 策略，选择使用哪种方案并不重要，只要能够解决问题即可。

在这里，我们选择 min-width: 0

gridboxgridbox