Fix the Flex display in Edge

user_961631 0
Viewed 14962

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.

microsoft-edge flexbox twitter-bootstrap-3 css
1 Answers

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>

user_28278230
Related