代码之家 › 专栏 › 技术社区 › Behrang Saeedzadeh

为什么1frcss网格列会中和其子<pre>块的“溢出:滚动”,为什么minmax(1px,1fr)会修复它?

css-grid css3 html5 css

1

Behrang Saeedzadeh · 技术社区 · 6 年前

在这个HTML结构中 <body> 要素 (demo here)

<div class="grid-1">
<header>
  <a href="/">Home</a>
</header>
<main>
  <article>
    <h1>Test</h1>
    <h2 id="overview">Overview</h2>
    <p>Lorem ipsum.</p>
    <div>
      <div>
        <pre><code>Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet
Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet
Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet
</code></pre>
      </div>
    </div>
    <h2 id="conclusion">Conclusion</h2>
    <p>Lorem ipsum.</p>
  </article>
</main>
<footer>
  <a href="/">Home</a>
</footer>

如您所见,第二个子元素(即 <main> 元素)具有 <pre>

当此CSS样式表应用于该HTML结构时:

html,
body {
  margin: 0;
  padding: 0;
}

.grid-1 {
  margin-bottom: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
} 

header {
  background: hsl(209, 36%, 90%);
  padding: 10px;
}

main {
  background: hsl(209, 36%, 80%);
  padding: 10px;
}

footer {
  background: hsl(209, 36%, 70%);
  padding: 10px;
}

pre {
  border: 1px solid black;
  padding: 10px;
  overflow-x: auto;
}

<前> 布洛克,制造 overflow-x: auto; 上 < 块,并将第三列从视图中推到右侧:

grid-template-columns: 1fr 1fr 1fr; 到 grid-template-columns: 1fr minmax(1px, 1fr) 1fr; ,所有三列的宽度和 <前> 布洛克的 overflow-x:自动;

minmax(1px, 1fr) 应该下定决心 1fr

1 回复 | 直到 6 年前

1

Behrang Saeedzadeh 6 年前

这种行为可以用默认值来解释 min-width 以及浏览器如何解释 minmax 功能。

违约 `最小宽度`

默认情况下,网格列具有 最小宽度 属于 auto Preventing a Grid Blowout ,这将导致列 ,这意味着它的内容可以影响它的宽度和扩大它。

最小宽度 列的其他部分 0px 1px ,或者任何有意义的事情。

怎么 `minmax(1px, 1fr)` `minmax(auto, 1fr)` 由浏览器解释

根据 MDN 的参考页 极小极大 :

一个包含两个参数的函数, 最小和

每个参数都可以是 <length> <percentage> ,一个 <flex> 值或关键字值之一 max-content , min-content ,或 汽车

最大值<最小 ,那么被忽略并且 minmax(min,max) 最小 <灵活> 值设置栅格轨迹的弹性系数;它至少是无效的。

但这并不能解释 ,当应用于轴网柱时,会更改 width ,或和 max-width

结果是至少在这种情况下,其解释方式类似于:

min-width: 1px;
max-width: 1fr;

同样地, 最小最大值(自动,1fr) 类似于:

min-width: auto;
max-width: 1fr;

min-width: auto; 允许浏览器将列的宽度扩展到 1fr

为什么1frcss网格列会中和其子<pre>块的“溢出:滚动”,为什么minmax(1px,1fr)会修复它?

违约 最小宽度

怎么 minmax(1px, 1fr) minmax(auto, 1fr) 由浏览器解释

违约 `最小宽度`

怎么 `minmax(1px, 1fr)` `minmax(auto, 1fr)` 由浏览器解释