width "100%" does not work as expected when inside flexbox item since v1.13.7

[sustmi]

Since v1.13.7 (including the latest v1.13.10), when placing the selectpicker with data-width="100%" inside flexbox item, the selectpicker overflows its parent element:

This used to work correctly up to v1.13.6:

Reproducible example:

<div class="d-flex" style="border: 2px solid red; width: 160px">
    <div class="flex-grow-1">
        <select
            class="selectpicker"
            data-width="100%"
        >
            <option value="" selected="selected">This is option number 1</option>
            <option value="1">This is option number 2</option>
            <option value="2">This is option number 3</option>
        </select>
    </div>
</div>

Live examples

• v1.13.6 - selectpicker stays inside its parent element
• v1.13.7 - selectpicker overflows its parent element

Debugging

I found that the problem may be caused by commit https://github.com/snapappointments/bootstrap-select/commit/70758b54bf362e66d7ba997c72388660c6ffaf09 where .filter-option was changed from position: absolute to position: static.

Environment

• Firefox 67.0.4 and Chrome 75.0.3770.100 on Fedora Linux 30.
• Twitter Bootstrap v4.3.1

[sustmi]

The example above is simplified to one selectpicker but I actually need two of them side by side and I need them to fit on a mobile device screen:

<div class="d-flex align-items-center" style="border: 2px solid red; width: 360px">
    <div class="pr-4 flex-grow-1">
        <select
            class="selectpicker"
            data-width="100%"
        >
            <option value="" selected="selected">This is option number 1</option>
            <option value="1">This is option number 2</option>
            <option value="2">This is option number 3</option>
        </select>
    </div>
    <div class="pl-4 flex-grow-1">
        <select
            class="selectpicker"
            data-width="100%"
        >
            <option value="" selected="">All options in the list</option>
            <option value="1">This is the other option 1</option>
            <option value="2">This is the other option 2</option>
            <option value="3">This is the other option 3</option>
        </select>
    </div>
</div>

• v1.13.6:
• v1.13.7:

[chandon]

It seems that forcing the css style of the button to position:absolute solves the issue (perhaps with a relative form-control container...)

[ocarreterom]

It's a bootstrap-select issue or a flexbox behavior?

Using Bootstrap row and col-* works for me. https://jsfiddle.net/u3pz0qba/5/

<div class="container my-3" style="border: 2px solid red;">
  <div class="row">
    <div class="col-6">
      <select class="selectpicker" data-width="100%">
        <option value="" selected="selected">This is option number 1</option>
        <option value="1">This is option number 2</option>
        <option value="2">This is option number 3</option>
      </select>
    </div>
    <div class="col-6">
      <select class="selectpicker" data-width="100%">
        <option value="" selected="selected">This is option number 1</option>
        <option value="1">This is option number 2</option>
        <option value="2">This is option number 3</option>
      </select>
      </div>
  </div>
</div>