fieldsetタグ内のButtonタグにdisplay:flexを適用する

fieldsetタグ内のButtonタグにflexboxスタイルを使用しても期待通りに動かない。
そんな時はdivタグでwrapperを作成する

Flexboxが適用されない例

<fieldset>
  <legend>データタイプを選択</legend>
  <button>ボタンA</button>
  <button>ボタンB</button>
  <button>ボタンC</button>
  <button>ボタンD</button>
</fieldset>

fieldset {
  display: flex;
  justify-content: space-around;
}

Flexboxが適用される書き方

<fieldset>
  <legend>データタイプを選択</legend>
  <div class="flexbox-wrapper">
    <button>CSV</button>
    <button>TSV</button>
    <button>Excel</button>
    <button>SQL</button>
  </div>
</fieldset>

.flexbox-wrapper {
  display: flex;
  justify-content: space-around;
}