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

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

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

Ответ 1

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

Отслеживание ошибок Chromium

Ответ 2

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

Значения flex shorthand без единичных значений flex-основы игнорируются.

flex-basis - минимальная ширина, контейнер может иметь, то она будет расти/сокращаться на основе ваших других правил. Ширину не нужно использовать одновременно с гибкостью и гибкостью, поскольку они противоречат совместимости с X-браузером.

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

Теперь вы можете видеть, как разные браузеры обрабатывают flex:

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

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

display: flex;

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

Источник: http://caniuse.com/#search=flex-basis

Источник: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored

Источник: https://msdn.microsoft.com/en-us/library/dn254946%28v=vs.85%29.aspx