Разница между шириной и гибкой основой

Я столкнулся с разницей в поведении между width а также flex-basis что я не могу объяснить чем отличаются flex-base и width?,

.outer {
  display: flex;
  background: yellow;
  padding: 10px;
}
.middle {
  display: flex;
  flex-shrink: 0;
  background: red;
  padding: 10px;
}
.inner {
  flex-basis: 258px;
  flex-shrink: 0;
  display: flex;
  flex-grow: 0;
  background: green;
}
.inner2 {
  width: 258px;
  flex-shrink: 0;
  display: flex;
  flex-grow: 0;
  background: green;
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      hello
    </div>
  </div>
</div>

<div class="outer">
  <div class="middle">
    <div class="inner2">
      hello
    </div>
  </div>
</div>

Вот пример, иллюстрирующий проблему, с которой я столкнулся. Я ожидаю, что обе строки будут выглядеть одинаково при использовании flex-basis (строка 1), гибкий контейнер (.middle элемент), кажется, игнорирует внутреннюю ширину своего дочернего элемента (.inner элемент) и учитывает только текст.

Это различие наблюдается в последних версиях Chrome, FF и Safari (но не в IE11/Edge).

Пояснение: я не спрашиваю, почему IE11 / Edge ведет себя так, как он. Его поведение (в данном случае) на самом деле кажется мне логичным. Я спрашиваю, почему есть разница во всех других браузерах.

Обновление: Edge 13 ведет себя так же, как IE11.

Источник

2 ответа

Решение

Это похоже на ошибку. Элемент, который является одновременно flex-контейнером и flex-элементом, по-видимому, игнорирует внутренние размеры своих дочерних элементов, если они установлены через flex-basisвместо этого выбрав для измерения ширину / высоту содержимого его дочерних элементов. Ирония в том, что IE11/Edge - единственный браузер, который правильно это реализует.

Хром трекер

Источник

Это связано с тем, что IE11 поддерживает flex по-разному (технически поддерживается только частично). IE 11 требует, чтобы модуль был добавлен к третьему аргументу, свойство flex-based см. В документации по msdn ниже.

Таким образом, сокращения стенографических объявлений со значениями flex-based без единиц игнорируются.

flex-base - это минимальная ширина, которую может иметь контейнер, тогда он будет расти / уменьшаться в соответствии с вашими другими правилами. Ширина не должна использоваться одновременно с flex и flex-based, поскольку они конфликтуют с совместимостью с X-браузером.

Я также обновил ваш кодекс, чтобы помочь объяснить. Пожалуйста, смотрите здесь: http://codepen.io/mattpark22/pen/wWqKpz

Теперь вы можете увидеть, как браузеры по-разному обрабатывают флекс с помощью:

flex-basis: 258px;
width: 258px;

Я также удалил

display: flex;

от.outer - это тоже имело эффект.

Источник: http://caniuse.com/

Source: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored

Source: https://msdn.microsoft.com/en-us/library/dn254946%28v=vs.85%29.aspx

Источник
Другие вопросы по тегам