为什么minmax(0，1fr)对长元素有效而1fr不起作用?

问题描述

所以我有这个网格:

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

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

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不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！