`repeat` with `auto-fill`, `minmax` and max-value being a `percentage` overflows instead of wrapping

[Zyclotrop-j]

Demo:

Codepen: https://codepen.io/anon/pen/XLmXeL

Considing the following:

grid-template-columns: repeat(auto-fill, minmax(<X>px, <Y>%));
for example: grid-template-columns: repeat(auto-fill, minmax(400px, 25%));

Expected behaviour:

Items are at least Xpx (eg 400px), but at most take Y% (eg 25%) of the grid.
When Xpx is bigger than Y% (eg with grid-width 800px -> 400px > 25%), Xpx is used (https://www.w3.org/TR/css-grid-1/#valdef-grid-template-columns-minmax: "If max < min, then max is ignored and minmax(min,max) is treated as min.")
Therefore the auto-fill will create at most Y% columns (eg 4 columns at 25%, 5 columns at 20%, 10 columns at 10%, ...), but there might be fewer, given the width of the grid (eg for a grid with with 800px and X = 400, there should be two).
Each column is at least Xpx (eg 400px).
This way items wrap nicely and no item is placed auto-side the grid.

Observed behaviour:

There are more grid-columns created than fit the grid. To be exact, there are always as many columns created as would fit the maximum-value (25% -> 4 columns, 20% -> 5 columns, ...).
Each column takes the minimum-value as width (in the example above 400px).
This makes the grid overflow! It also prevents the intended wrapping.

Note that by above logic the following should holds true:

Given
"If max < min, then max is ignored and minmax(min,max) is treated as min."
width: 800px;

Then
grid-template-columns: repeat(auto-fill, minmax(400px, 25%));
Should equal
grid-template-columns: repeat(auto-fill, 400px);

because
minmax(400px, 25% [of 800px])) = minmax(400px, 200px)) = 400px

Browsers

Observed in Firefox (67.0.2 (64-bit)) and Chrome (Version 74).

Partial workaround

Use flexbox (display: flex on wrapper) with wrapping (flex-wrap: wrap on wrapper) and max-width: 25%, min-width: 400px, width: 100vw (all on child; potentially add box-sizing: border-box to fit all four items despite of borders).
Downsides: Item's can't be placed at certain positions in the grid. Items can't stretch in height (span 2 + dense grid).