CSS 网格大小：如果另一列很小，则允许任一列占据整个宽度，但如果不使用一定比例

Question

我想布置一个 CSS 网格（或表格）以下属性：

• 在最常见的情况下，列一起包含的内容会填满整个宽度，给它们宽度 1:2 (1fr 2fr)
• 但是，如果第一列的内容很小，则允许第二列展开
• 同样，如果第二列的内容很小，让第一列扩大
• 如果两列都很小，则网格可能会缩小。
• 两列都应具有最小宽度，但使用网格布局工具似乎很容易。

另外，因为我认为这可能很难用上面的方法实现：第一列将包含一个<ul> 。 它的列表项不应该换行； 它们应该被截断。 如果您在第一列上指定max-width ，这很容易实现（使用white-space: nowrap ），但据我所知，不可能指定比例最大宽度，因为如果其他列应该扩展柱子很小。 此外，我认为这意味着网格大小中的任何度量都不能使用第一列的max-content ，因为这将是未截断的全宽，这在大多数情况下都会出错。

这是一个示例，没有尝试截断，它与我们得到的一样接近：

 .notatable { display: grid; grid-template-columns: fit-content(33%) 2fr; column-gap: 1em; }

 <div class="notatable"> <span>A</span> <span>B</span> <span>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </span> <span>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </span> </div> <hr> <div class="notatable"> <span>A</span> <span>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </span> </div> <hr> <div class="notatable"> <span>A test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </span> <span>B</span> </div> <hr> <div class="notatable"> <span>A</span> <span>B</span> </div>

（请注意现实中会有更多的行）

场景符合上面前四个项目符号的要求，您可以看到第三种场景是唯一不满足的场景：第二列的内容很小，但第一列没有扩展。 这当然是意料之中的； 33% 是第一列大小的上限。

这似乎应该很简单。 我可以将逻辑总结为“有内容有空间就展开，没有内容就按这个比例分割空间”。 除了获得一个实用的解决方案之外，我很高兴知道这是否比我预期的更难的根本原因。 有什么未指定的吗？ 其中一些长度是周期性依赖的吗？