Flexbox を使用して Bootstrap 4 でネストされたグリッドを使用する方法

Flexbox で Bootstrap 4 CSS を使用していますが、ネストされたグリッドに問題があります。グリッドのネストは、フレックスボックスなしの Bootstrap 4 で期待どおりに機能しますが、フレックスボックスを使用すると、要素が水平に配置される代わりに積み重ねられます。このコード:

<main class="container-fluid">
    <form novalidate>
        <div class="row">
            <div class="col-md-6 col-xs-12">
                <fieldset class="form-group">
                    <label>Single input</label>
                    <div class="input-group input-group-sm">
                        <span class="input-group-addon">1</span>
                        <input type="text" class="form-control" placeholder="100%">
                    </div>
                </fieldset>
            </div>
            <div class="col-md-6 col-xs-12">
                <fieldset class="form-group row">
                    <div class="col-md-6">
                        <label>Double Input 1</label>
                        <input type="text" class="form-control" placeholder="50%">
                    </div>
                    <div class="col-md-6">
                        <label>Double Input 2</label>
                        <input type="text" class="form-control" placeholder="50%">
                    </div>
                </fieldset>
            </div>
        </div>
    </form>
</main>

このビューを作成します。

編集: 奇妙なことに、2 列目のフィールド セットを div に変更すると、レイアウトは期待どおりに機能します。私は違いを見つけることができませんでしたただし、要素の計算された高さに加えて、フィールドセットと div の間に重要な CSS があります。設計を壊す fieldset には何がありますか?

残念ながら、cdn から入手できる Bootstrap 4 css のバージョンがフレックスボックスに対応していないため、jsfiddle を作成できません。

次の内側の行は

<!-- does not work -->
<fieldset class="form-group row">
  ...
</fieldset>


<!-- better solution -->
<div class="row">
  <fieldset class="form-group">
    ..
  </fieldset>
</div>