根据我的经验，我发现无论是<fieldset>，或<button>，或<textarea>都不能正确使用display:flex或继承属性。

正如其他人已经提到的，已经报告了错误。如果你想要使用flexbox来控制排序(例如order:2)，那么你需要将元素包装在div中。如果你想要flexbox来控制实际的布局和尺寸，那么你可能会考虑使用div，而不是输入控件(这很糟糕，我知道)。

根据Bug 984869 - display: flex不适用于按钮元素，

<button> is not implementable (by browsers) in pure CSS, so they are a bit of a black box, from the perspective of CSS. This means that they don't necessarily react in the same way that e.g. a <div> would. This isn't specific to flexbox -- e.g. we don't render scrollbars if you put overflow:scroll on a button, and we don't render it as a table if you put display:table on it. Stepping back even further, this isn't specific to <button>. Consider <fieldset> and <table> which also have special rendering behavior: data:text/html,<fieldset style="display:flex"><div>abc</div><div>def</div> In these cases, Chrome agrees with us and disregards the flex display mode. (as revealed by the fact that "abc" and "def" end up being stacked vertically). The fact that they happen to do what you're expecting on <button style="display:flex"> is likely just due to an implementation detail. In Gecko's button implementation, we hardcode <button> (and <fieldset>, and <table>) as having a specific frame class (and hence, a specific way of laying out the child elements), regardless of the display property. If you want to reliably have the children reliably arranged in a particular layout mode in a cross-browser fashion, your best bet is to use a wrapper-div inside the button, just as you would need to inside of a <table> or a <fieldset>.

因此，该错误被标记为“已解决无效”。

还有Bug 1047590 - display: flex;不工作在<fieldset>，目前“未确认”。

好消息:Firefox 46+实现了<fieldset>的Flexbox。参见bug 1230207。

<div role="group">
    <p>foo</p>
    <p>bar</p>
</div>
<div>
    <p>foo</p>
    <p>bar</p>
</div>

可能需要使用角色组，因为firefox, chrome和我认为safari有一个bug与字段集明显。那么CSS中的选择器就是

div[role='group'], div {
    display: flex;
    border: 1px solid;
}

编辑:这里有一些其他人也在经历的问题。

发行375693

发行262679

根据我的经验，我发现无论是<fieldset>，或<button>，或<textarea>都不能正确使用display:flex或继承属性。

正如其他人已经提到的，已经报告了错误。如果你想要使用flexbox来控制排序(例如order:2)，那么你需要将元素包装在div中。如果你想要flexbox来控制实际的布局和尺寸，那么你可能会考虑使用div，而不是输入控件(这很糟糕，我知道)。

回答最初的问题:是的，这是一个bug，但在提出问题时并没有明确定义。

现在fieldset的呈现有了更好的定义:https://html.spec.whatwg.org/multipage/rendering.html#the-fieldset-and-legend-elements

在Firefox和Safari中，flexbox on fieldset现在工作。在铬中还没有。(见https://bugs.chromium.org/p/chromium/issues/detail?id=375693)

参见https://blog.whatwg.org/the-state-of-fieldset-interoperability了解2018年规范的改进。

你可以用下面的道具在<fieldset>中添加额外的div:

flex-inner-wrapper {
  display: inherit;
  flex-flow: inherit;
  justify-content: inherit;
  align-items: inherit;
}