为什么1fr CSS网格列会抵消其子<pre> blocks and why minmax(1px, 1fr) fixes it?

时间：2018-10-01 09:08:15

标签： css html5 css3 css-grid

In this HTML structure which is placed inside the <body> element (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>

as you can see, the second child element (i.e. the <main> element) has a <pre> block with a few lengthy lines of code.

When this CSS stylesheet is applied to that HTML structure:

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;
}

The second column stretches to contain the entire lines of the <pre> block, making the overflow-x: auto; on the <pre> block to be effectively ignored, and pushes the third column out of the view and to the right:

Grid 1fr 1fr 1fr

However, if I change grid-template-columns: 1fr 1fr 1fr; to grid-template-columns: 1fr minmax(1px, 1fr) 1fr;, all three columns are assigned equal widths and the <pre> block's overflow-x: auto; comes into effect.

grid 1fr minmax(1px, 1fr) 1fr

If I am not mistaken, in this scenario, minmax(1px, 1fr) should resolve to 1fr and make the second grid effectively identical to the first grid. Then why does it change the way the grid is rendered?

1 个答案:

答案 0 :(得分：0)

此行为可以通过网格列的默认min-width以及浏览器如何解释minmax函数来解释。

网格列的默认min-width

默认情况下，网格列的min-width为auto。如Preventing a Grid Blowout中所述，这将导致列“大小不定” ，这意味着其内容会影响其宽度并将其扩展。

可以通过将列的min-width设置为auto以外的其他内容（例如0px，1px或其他有意义的设置）来覆盖此行为。

浏览器如何解释minmax(1px, 1fr)和minmax(auto, 1fr)

根据MDN对minmax的参考页：

  

具有两个参数 min 和 max 的函数。

     

每个参数可以是<length>，<percentage>，<flex>值或关键字值max-content，min-content或{{ 1}}。

     

如果 max ，则将 max 忽略，并将auto视为 min 。最大值minmax(min,max)设置网格轨迹的柔度因子。至少是无效的。

但是，当<flex>应用于网格列时，是否会改变minmax或width和min-width属性的行为？

事实证明，至少在这种情况下，max-width的解释方式类似于：

minmax

类似地，min-width: 1px; max-width: 1fr; 的解释类似于：

minmax(auto, 1fr)

但是如前所述，根据列的内容，min-width: auto; max-width: 1fr; 将允许浏览器将列的宽度扩展到min-width: auto;之外，这可能会引起混乱。

相关问题
最新问题