fieldset 元素添加 display: flex不生效的问题

问题

最近写项目时候， 对 fieldset 元素 添加 display: flex ， 但是没有达到预期中的效果。

在网上， stackoverflow 上都提到了这个 bug， 然后查看了官方文档

解决方案

在 fieldset 中添加 一个 div 元素 用来 作为 flex box

官文

Styling with CSSSection

There are several special styling considerations for .

fieldset 有几个特殊的 样式注意点：

Its display value is block by default, and it establishes a block formatting context. If the is styled with an inline-level display
value, it will behave as inline-block, otherwise it will behave as block. By default there is a 2px groove border surrounding the contents, and a small amount of default padding. The element has min-inline-size: min-content by default.

display 属性值默认为 block, 并创建一个 格式化上下文的块级元素。 如果 fieldset 被 行内级别 display 属性值修饰， 那么 将作为 行内块展示。否则作为行内快展示。fieldset 默认存在一个 2px 的边框 和 默认的padding. 该元素有个默认的 最小的行内尺寸，其默认值为 最小的内容尺寸。

If a is present, it is placed over the block-start border. The shrink-wraps, and also establishes a formatting context. The display value is blockified (for example, display: inline behaves as block).

如果 legend 元素存在，将会被放置在 块的起始边界上。

There will be an anonymous box holding the contents of the , which inherits certain properties from the . If the is styled with display: grid or display: inline-grid, then the anonymous box will be a grid formatting context. If the is styled with display: flex or display: inline-flex, then the anonymous box will be a flex formatting context. Otherwise it establishes a block formatting context.

You can feel free to style the and in any way you want to suit your page design.