html - 让 flex-container 只使用必要的宽度

Question

一个弹性容器定义为

display: flex; 
flex-flow: column wrap;
height: 4em;

将消耗所有可用的宽度，如在这个小提琴中看到的。我怎样才能让它更像一张桌子，只占用必要的空间？

注意：我不想分配某个宽度，因为我事先不知道所需的宽度，并且想在剩余空间中放置其他内容。

Answer 1

不幸的是，您将无法获得表格行为。您可以获得内联块行为：

.foo {
    display: inline-flex;
}

这里的区别是table强制后面的内容出现在后面而不是在同一行上。