6

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.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
serge
  • 13,940
  • 35
  • 121
  • 205
  • 1
    *Why I can't see the latest input entirely in Microsoft Edge (is OK even in IE), and how to fix it.* See the **Browser Rendering Notes** section in the duplicate. – Michael Benjamin Sep 27 '17 at 16:53
  • @Michael_B I could agree, there are some similitude in my question and another's *answers*. However I'll hardly mark that two *questions* as duplicates... – serge Sep 27 '17 at 17:29
  • 2
    Right. Except that the vast majority of people don't come to Stack Overflow for the questions. They come for the answers. That's where the value is. Hence, the header for the duplicate says: **This question already has an** ***answer*** **here**. – Michael Benjamin Sep 27 '17 at 17:41
  • 2
    In fact, two questions could be completely unrelated. But, as implied by the language in the header, if they both share the same solution, one can be closed as a duplicate. – Michael Benjamin Sep 27 '17 at 17:41

1 Answers1

10

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>
Asons
  • 84,923
  • 12
  • 110
  • 165
  • @Serge Added a first explanation, though will see if I can find a bug report or something. – Asons Sep 27 '17 at 16:45