Flex-Grow работает не так, как ожидалось (Flex-элементы не имеют ожидаемой ширины)

JSFiddleI»

я пытаюсь использоватьflex CSS-свойства для размещения набора элементов в аккуратной маленькой коробке.

Это выглядит именно так, как я хочу в IE10, но Chrome показывает это совсем по-другому. У меня в основном есть:

КонтейнерВыберите поле (flex:5), должно быть достаточно широко, чтобы показатьD, но не намного шире.Ввод текста (flex:10), должен занимать чуть больше половины ширины содержимогоКнопка подтверждения (flex:6), должен быть достаточно широким, чтобы содержать его текст, но не намного.

В IE он работает нормально, но в Chrome первые два элемента занимают по 50% ширины, и кнопка подтверждения падает с конца.

Моя логика Flex неверна или Chrome не работает?

Ответы на вопрос(1)

Ваш ответ на вопрос