为什么 minmax(0, 1fr) 对长元素有效而 1fr 无效?

问题描述

所以我有这个网格:

+---------+------------------------------+---------+
|  <div>  |  <p> - 1000 characters long  |  <div>  |
+---------+------------------------------+---------+

在p里面有一个没有空格的超长字符串.divs 是具有固定尺寸的占位符.这产生了上述内容:

Inside p there's super long string with no spaces. divs are placeholders with fixed dimensions.This produces the above:

  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto minmax(0, 1fr) auto;

但是将 minmax(0, 1fr) 更改为 1fr 给出:

But changing minmax(0, 1fr) to 1fr gives this:

+---------+----------------------------------------+
|  <div>  |               <p> - 1000 characters long  |  <div>  |
+---------+----------------------------------------+

它溢出了它的父级并且超出了屏幕尺寸.为什么它的行为不像 minmax 那样?

It overflows out of its parent and way out of screen size. Why isn't it behaving like minmax?

Codepen

推荐答案

因为 1fr 等价于 minmax(auto, 1fr)，默认情况下.

Because 1fr is equivalent to minmax(auto, 1fr), by default.

当您使用 minmax(0, 1fr) 时，这与独立的 1fr 有所不同.

When you use minmax(0, 1fr), that's something different than standalone 1fr.

在第一种情况下，轨道不能小于网格项的大小(min 大小为 auto).

In the first case, the track cannot be smaller than the size of the grid item (min size is auto).

在第二种情况下，轨道可以自由调整为 0 宽度/高度.

In the second case, the track is free to resize to a 0 width/height.

更多详情:

• 重新思考1fr的含义
• 防止网格区域扩大导致整个页面滚动

这篇关于为什么 minmax(0, 1fr) 对长元素有效而 1fr 无效?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！