Fix the Flex display in Edge [duplicate]

Question

I have the following:

.flex { display: flex; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
                                                                    rel="stylesheet"/>
<div class="flex">
  <input class="form-control" />
  <div class="flex">
    <input class="form-control" value="123456789" />
    <input class="form-control" value="123456789" />
  </div>
</div>

Why I can't see the latest input entirely in Microsoft Edge (is OK even in IE), and how to fix it.

Answer 1

If you add min-width: 0; to form-control it work cross browser.

It appears Edge does some other calculation for the input's width, and since the min-width defaults to auto, it won't allow it to be less than its computed width, which min-width: 0 solves.

Will see if I can find some more info about this issue, and when/if, I will update this answer.

.flex { display: flex; }
.form-control { min-width: 0; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="flex">
  <input class="form-control" />
  <div class="flex">
    <input class="form-control" value="123456789" />
    <input class="form-control" value="123456789" />
  </div>
</div>