button size not respected when direct child of div with d-flex

[jclijmans]

When placing a button with size classes as direct child of a div with d-flex, size is not respected

<div class="d-flex flex-row">
  <button type="button" class="m-2 btn btn-primary">Default</button>
  <button type="button" class="m-2 btn btn-primary btn-sm">Small</button>
  <button type="button" class="m-2 btn btn-primary btn-md">Medium</button>
  <button type="button" class="m-2 btn btn-primary btn-lg">Large</button>
</div>

produces

While

<div class="d-flex flex-row">
  <div>
    <button type="button" class="m-2 btn btn-primary">Default</button>
    <button type="button" class="m-2 btn btn-primary btn-sm">Small</button>
    <button type="button" class="m-2 btn btn-primary btn-md">Medium</button>
    <button type="button" class="m-2 btn btn-primary btn-lg">Large</button>
  </div>
</div>

produces

Not sure if it's a bug, or more likely that I don't understand it properly.

• Bootstrap 5.1.0
• Operating system and version (Windows, macOS, Android, iOS)
  Windows 10 21H1
• Browser and version (Chrome, Firefox, Safari, Microsoft Edge, Opera, Android Browser)
  Microsoft Edge : Version 92.0.902.78
  Chrome : Version 92.0.4515.159
  Firefox : 91.0.2 (64-bit)

[zaidjawed]

Maybe I can resolve this issue. Should I work on this ?