使一个单元格始终是最大的

Question

水平调整窗口大小表明最左边的单元格(大小为1fr)增长最多，但也是第一个缩小的。

* {
border: 1px solid black;
}
.grid {
grid-template-columns: 1fr minmax(2em, max-content) minmax(2em, max-content);
display: grid;
}

<div class="grid" width="100%">
<div>lorem ipsum dolor sit amet</div>
<div>consectetur adipiscing elit in</div>
<div>venenatis dignissim erat vel fringilla</div>
</div>

当窗口足够宽以支持它时，我如何使最左边的列增长最多(并将所有其他列锁定为width: max-content)

但是当窗口宽度收缩时，我希望最左边的列暂停在width: max-content，然后其他列应该在最左边的列开始收缩之前收缩到2em宽度。

最左边的单元格应该始终被赋予大小优先级

---

I tried doing

grid-template-columns: max(1fr, minmax(2em, max-content)) minmax(2em, max-content) minmax(2em, max-content);

，但被告知这是一个无效的属性值(1fr似乎不能在计算中使用)

Answer 1

可能像这样

* {
border: 1px solid black;
}
.grid {
grid-template-columns: minmax(max-content, 1fr) minmax(2em, max-content) minmax(2em, max-content);
display: grid;
}

<div class="grid" width="100%">
<div>lorem ipsum dolor sit amet</div>
<div>consectetur adipiscing elit in</div>
<div>venenatis dignissim erat vel fringilla</div>
</div>