formの選択肢をfieldsetでまとめた際に、親要素のサイズをオーバーフローしてしまうトラブルに遭いました。
具体的には、下のようなオーバーフローするfieldsetの子要素をスクロール表示させたい状況 です。
See the Pen Untitled by Takashi Abe (@TakeshiAbe) on CodePen.
fieldsetや、その子要素にある .scroll-area にwidth:100% 、overflow-x:scroll などのプロパティを追加してみても何も変化がありません。
困ったときのMDN を見直してみると、「要素は既定で min-inline-size: min-content を持ちます。」とのこと。原因はこれですね。
filedset要素の最小サイズを指定すれば解決
デフォルトでは、fieldsetの子要素が収まりきるサイズがmin-width (もし縦書きならmin-height)となるので、それを任意の値で上書きしてやれば解決です。
今回は fieldset{ min-width: 0 } で解消しました。
