html - 在不使用 flex-direction :column? 的情况下动态确保所有 flexbox 元素具有相同的最小宽度

Question

注意有一个类似的问题here ，但是纯 css 答案使用 flex-direction: column 作为容器。

原来问题的答案似乎是 flexbox 不支持这个，但是我也想知道 CSS Grid 是否可行.也许最好在一个新问题中提出...

我有一个 flexbox 容器，里面有几百个元素，其中包含可变长度的文本，white-space 设置为 nowrap 以确保文本不换行。这是一个例子:

<div style="display:flex; flex-direction: row;">
    <div>Short label</div>
    <div>Really really really looooooong label</div>
    <div>Really really really looooooong label that's even longer</div>
    ...
    <div>And so on for a few hundred of these divs</div>
</div>

是否有一组 flexbox 参数可以使所有元素的宽度等于内容最长的元素的宽度？在这种情况下，它将是 div:

    <div>Really really really looooooong label that's even longer</div>

我能做的是测量上述 div 的长度并将最小宽度设置为该长度，但我想知道 flexbox 是否有自动执行此操作的方法？目前，正如@M0ns1f 在他的回答中指出的那样，似乎唯一的方法是手动或通过 javascript 设置 minimum-width。

Answer 1

在@Matt Weber 发表评论后这是你应该做的

var choices = document.querySelectorAll('div');
var maxWidth = 0;
// read
for (i = 0; i < choices.length; ++i) {
    maxWidth = Math.max(maxWidth, choices[i].offsetWidth)
};

// write
for (i = 0; i < choices.length; ++i) {
    choices[i].style.minWidth = maxWidth + "px";
};

.contain{
 width:100% !important;
 min-width:100%;
 display:flex;
 flex-direction: row;
}
div.contain div {
 white-space: nowrap;
 margin: 0 5px;
}

<div class="contain" >
    <div>Short label</div>
    <div>Really really really looooooong label</div>
    <div>Really really really looooooong  looooooong looooooong label that's even longer</div>
    <div>And so on for a few hundred of these divs</div>
</div>