P粉3047046532023-08-21 13:34:12
The previous answers are very good, but I also want to mention that for grids there is an equivalent way of fixing the layout, you just need to case your tracks as minmax(0, 1fr )
instead of 1fr
.
P粉8180888802023-08-21 00:00:55
By default, the size of a grid item cannot be smaller than the size of its content.
The initial sizes of grid items are min-width: auto
and min-height: auto
.
You can do this by setting the grid items to min-width: 0
, min-height: 0
or overflow
(except visible# any value other than ##) to override this behavior.
From specification:
Here is a more detailed explanation that covers flex items, but also applies to grid items:This article also covers
potential issues with nested containers and known rendering differences between major browsers.
.month-grid { display: grid; grid-template: repeat(6, 1fr) / repeat(7, 1fr); background: #fff; grid-gap: 2px; min-height: 0; /* 新增 */ min-width: 0; /* 新增;Firefox需要 */ } .day-item { padding: 10px; background: #DFE7E7; overflow: hidden; /* 新增 */ min-width: 0; /* 新增;Firefox需要 */ }
and
minmax(0, 1fr)