I have this code:
<body style="width:200px">
<div style="display: flex">
<div style="display: flex">
<div style="width: 40px;height: 10px;background: red"></div>
<input style="width: 100%" />
</div>
<div>
<input style="width: 100%" />
</div>
</div>
</body>If you open this code with Chrome and FF you will see a different behavior.
Here is the demo
In Chrome (and IE) it will look like this:
And in FF like this:
My questions:
1) Why the browsers act differently?
2) I think Chrome is the correct behavior, how can I minimally change my code so FF will be like Chrome? (I still need the display:flex and width 100% on the inputs, also all must be under width: 200px)
