I've noticed the 'input' element does not stretch or shrink to fill a flex container. Does anyone know why and if there is a solution?
My example below shows the container class c being used on Div elements (which stretch properly). And a single class e, used for the right-justified fixed-length end. The row of divs stretch and shrink as expected, the row of inputs do not.
div.c { display: flex; flex-direction: row; align-content: stretch;}div.d { flex: 1;}div.e { display: inline-block; flex: 0 0 30px; background-color: red;}<div class='c'><div class='d'>A</div><div class='d'>B</div><div class='d'>C</div><div class='d'>D</div><div class='e'>E</div></div><div class='c'><input class='d'></input><input class='d'></input><input class='d'></input><input class='d'></input><div class='e'></div></div>note i am aware of this link:
input / button elements not respecting flex-grow
However using min-width: 0; box-sizing: border-box; has no effect for me.