为什么不能<flex>集装箱？
我尝试使用display: flex和display: inline-flex来设置fieldset元素的样式。
然而，它不起作用： flexperformance得像block ，而inline-flexperformance得像inline-block 。
在Firefox和Chrome上都会发生这种情况，但奇怪的是，它可以在IE上运行。
这是一个错误？ 我无法find该fieldset应该有任何特殊的行为，无论是在HTML5或CSS灵活框布局规范。
fieldset, div { display: flex; border: 1px solid; }
<fieldset> <p>foo</p> <p>bar</p> </fieldset> <div> <p>foo</p> <p>bar</p> </div>
根据错误984869 – display: flex不适用于button元素 ，
<button>在纯CSS中是不可实现的（通过浏览器），所以从CSS的angular度来看，它们有点像黑盒子。 这意味着它们不一定会像<div>那样反应。这不是特定于flexbox – 例如，如果您将
overflow:scroll到一个button上，我们不呈现滚动条，如果您将display:table放在它上面，我们不会将其呈现为表格。更进一步，这不是特定于
<button>。 考虑<fieldset>和其中也有特殊的渲染行为：<table>data:text/html,<fieldset style="display:flex"><div>abc</div><div>def</div>在这些情况下，Chrome浏览器同意我们的看法，不理会
flex显示模式。 （正如“abc”和“def”最终被垂直堆放的事实所显示的那样）。 事实上，他们碰巧做你所期望的<button style="display:flex">很可能只是由于实现的细节。在Gecko的button实现中，我们硬编码
<button>（和<fieldset>，和）具有特定的框架类（因此，布置子元素的具体方式），而不pipe<table>display属性如何。如果您想要可靠地让孩子以一种特定的布局模式以一种跨浏览器的方式可靠地安排，最好的方法是在button内部使用一个wrapper-div，就像你需要在
一个一个<table>或者<fieldset>。
因此，该错误被标记为“解决无效”。
还有Bug 1047590 – display: flex; 在<fieldset>不起作用 ，目前“未确认”。
好消息 ：Firefox 46 +为<fieldset>实现了Flexbox。 请参阅错误1230207 。
我发现这可能是Chrome和Firefox中的一个bug，其中legend和fieldset被replace的元素 。
错误报告：
错误Chrome
错误的Firefox
可能的解决方法：
可能的解决方法是在HTML中使用<div role="group"> ，并在CSS div[role='group']作为select器应用。
根据我的经验，我发现<fieldset> ， <button>和<textarea>都不能正确使用display:flex或inherited属性。
正如其他人已经提到，错误已经被报道。 如果您想使用flexbox来控制sorting（例如order:2 ），那么您需要将该元素封装在div中。 如果你想要flexbox来控制实际的布局和尺寸，那么你可能要考虑使用一个div，而不是input控件（我知道这太臭了）。
<div role="group"> <p>foo</p> <p>bar</p> </div> <div> <p>foo</p> <p>bar</p> </div>
可能需要使用angular色组，因为Firefox，铬和我觉得Safari浏览器显然有一个字段的错误。 那么CSS中的select器就简单了
div[role='group'], div { display: flex; border: 1px solid; }
编辑：这是一些其他人正在经历的问题。
问题375693
问题262679
你可以在<fieldset>join以下的道具：
flex-inner-wrapper { display: inherit; flex-flow: inherit; justify-content: inherit; align-items: inherit; }
