Flex-grow nie działa zgodnie z oczekiwaniami (elementy flex nie mają oczekiwanych szerokości)

JSFiddle

Próbuję użyćflex Właściwości CSS, aby dopasować zestaw elementów do zgrabnego małego pudełka.

Wygląda dokładnie tak, jak tego chcę w IE10, ale Chrome pokazuje, że jest zupełnie inaczej. Zasadniczo mam:

PojemnikWybierz pole (flex:5), powinien być wystarczająco szeroki, aby pokazaćD, ale nie dużo szerszy.Wprowadzanie tekstu (flex:10), powinien zajmować nieco ponad połowę szerokości zawartościPotwierdź przycisk (flex:6), powinien być wystarczająco szeroki, aby zawierał jego tekst, ale niewiele więcej.

Działa dobrze w IE, ale w Chrome pierwsze dwa elementy zajmują 50% szerokości, pozostawiając przycisk potwierdzenia spadający z końca.

Czy moja logika Flex jest błędna, czy Chrome się psuje?

questionAnswers(1)

yourAnswerToTheQuestion