The following third flex item has a flex-grow of non-zero value, which is 0.1. It might be reasonable and I also read a suggestion that it should take up 100% of any extra space, because the other flex items are 0, and cannot grow. This one is 0.1 and even 0.1 / 0.1 is 100% (as a ratio). However, in practice on Chrome and Firefox it only took 10% of the extra space. Why and how should it behave?
#container { display: flex; border: 1px dashed blue}#container div { border: 1px dashed orange}#container div:last-child { flex-grow: 0.1; background: #ccc}<div id="container"><div>1</div><div>2</div><div>3</div></div>