Firefox, Flexbox и переполнение

После последнего обновления firefox некоторые из css3-кода были повреждены... Пример (jsfiddle).

В хроме:
В firefox 34:

Это ошибка? Или нормальная работа? Что мне нужно изменить, чтобы исправить это? Почему #flex не изменяются правильно?

HTML:

<div id="outer">
    <div id="flex">
        <label>123</label>
        <input type="text" value="some text" />
    </div>
</div>

CSS

#outer { display: flex; }

#flex {
    display: flex;
    border: 1px solid green;
    outline: 1px solid red;
}

label { flex: 0 0 80px; }

Ответы

Ответ 1

Fix:

input { min-width: 1px; }

Для вертикального направления - min-height;

Ответ 2

В Firefox 34 есть ошибка. Один из элементов не играет хорошо, как гибкий ребенок, и вход кажется слишком широким. Эта дополнительная ширина не учитывается зеленой рамкой гибких контейнеров.

Это может быть подтверждено как ошибка, потому что в Firefox 33.1 (и Chrome/IE) нет проблем с вашим примером:

Ваш пример Firefox 33.1

Ваш пример Firefox 34.0.5 — Ширина входного сигнала просчитывается с помощью гибкого контейнера, и самому входу не может быть задана меньшая ширина.

В качестве обходного пути мы можем установить ширину на метке; эта ширина распознается контейнером, и ошибка предотвращается в Firefox 34. Для того, чтобы использоваться только в Firefox, мы можем установить ширину с помощью префикса -moz- с помощью calc:

label {
    width: -moz-calc(80px);
}

(Очевидно, что предыдущие версии Firefox также распознают эту ширину)

Пример обхода ошибки

Использование inline-flex

В вашем примере похоже, что вы хотите использовать inline-flex, чтобы скрыть ширину формы до ширины ее дочерних элементов. Я использовал это и удалил дополнительный div, который больше не нужен. Существует большая разница в ширине ввода для браузера (это согласуется с примером в вашем вопросе).

Firefox 33

Firefox 34

Chrome

IE11

form {
  display: inline-flex;
  border: solid 1px green;
  outline: 1px solid red;
}
label {
  flex: 0 0 80px;
  width: -moz-calc(80px);
}

<form>
  <label>123</label>
  <input type="text" value="some text" />
</form>

Ответ 3

Что вы можете сделать, вычтите 80px из 100% и установите для этого параметра width для input. Кроме того, добавьте box-sizing: border-box, чтобы предотвратить переполнение.

form {
  display: flex;
}
#flex {
  display: flex;
  border: 1px solid green;
  outline: 1px solid red;
}
label {
  display: flex;
  flex: 0 0 80px;
}
input {
  width: calc(100% - 80px);
  box-sizing: border-box;
}

<form>
  <div id="flex">
    <label>123</label>
    <input type="text" value="some text" />
  </div>
</form>

Ответ 4

вариант с

min-width: 0

также работает

Ответ 5

Display: flex; только должен находиться на контейнере, который должен быть гибким, а не внутренним. Здесь обновленный CSS, если вам нужна определенная ширина, вы можете установить это на form {}.

CSS

form {}

#flex {
    display: flex;
    border: 1px solid green;
    outline: 1px solid red;
}

#flex > * {
    flex: 1;
}

label {}

input {}