CSS网格，自动填充和网格单元的自动调整大小

Question

我正在尝试创建一个按钮栏组件，如果有足够的空间，则在一行中布置几个按钮，如果没有足够的水平空间，则开始垂直堆叠按钮。我正在使用CSS网格：

.button-bar {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
    grid-gap: 5px;
}

现在有一个问题，在minmax表达式中我必须适应我的应用程序中最大可能的按钮。我真正想要的是minmax(auto, 1fr)。也就是说，当按钮垂直堆叠时，列可以具有不同的宽度，并且列宽将大到适合该列中的最大按钮。像这样：