Гибкий контейнер с шириной ввода 100% Ошибка FF - PullRequest
Новая
       34

Гибкий контейнер с шириной ввода 100% Ошибка FF

0 голосов
/ 25 мая 2020

У меня есть этот код: 

<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>

Если вы откроете этот код с помощью Chrome и FF, вы увидите другое поведение.
Вот демонстрация

В Chrome (и IE) это будет выглядеть так: enter image description here
А в FF так: enter image description here

Мои вопросы:
1) Почему браузеры действуют по-другому?
2) Я думаю, что Chrome - правильное поведение, как я могу минимально изменить свой код, чтобы FF был похож на Chrome? (Мне все еще нужны display: flex и width 100% на входах, также все должны быть меньше ширины: 200 пикселей)

...