Question

定义为

的flex容器

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

将消耗此fiddle中显示的所有可用宽度。如何让它更像表格，只消耗必要的空间？

注意：我不想指定一定的宽度，因为我事先并不知道所需的宽度，并且想要将其他内容放在剩余的空间中。

Answer 1

不幸的是，您将无法获得 table 行为。您可以获得内联阻止行为：

.foo {
    display: inline-flex;
}

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