Bootstrap 5 tab panes not working with flexbox properly

I am using barebones Bootstrap 5 tabs(pills) setup straight from Docs page:

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"><li class="nav-item" role="presentation"><a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a></li><li class="nav-item" role="presentation"><a class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a></li><li class="nav-item" role="presentation"><a class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a></li></ul><div class="tab-content" id="pills-tabContent"><div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div><div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div><div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div></div>

I then populate tab-panes with floating-divs:

.floating-div {  float: left;  display: block;  height: 100px;  width: 100px;  border: 1px solid #dddddd;  margin: 10px 10px 0 0;}.pane-1 {    background-color: green;  }.pane-2 {    background-color: orange;  }.pane-3 {    background-color: blue;  }

Up to this point everything works as expected - JsFiddle .

Then I am applying standard bootstrap's flexbox classes to tab-panes to align tab content to my liking d-flex flex-wrap justify-content-between.

That's where the whole thing went downhill - JsFiddle .

The way the content in the first tab-pane lays out is what I am after, but for some reason content in all the other tab-panes is shifted down. Not only that, but, on the close inspection it appears that each of the tab-panes contain ALL the floating-divs that supposed to be spread out across 3 different divs, some of them are just invisible...

Now my question is: Is there something wrong with my CSS or with the way I use Bootstrap's flexbox classes, or is it a bug in Bootstrap?