Как мы можем вычислить "flex-based: auto & min-width" и "width at cross axis"?

Я хочу знать, как вычисляются flex-basis: auto & min-width: 0 и width: auto (width не установлен для родительского элемента и элемента flex). Поэтому я подтвердил спецификацию W3C. Правильно ли мое понимание ниже?

flex-basis: auto (Нет определения ширины для родительского элемента, установлено min-width: 0)

Я прочитаю эту часть (7.1. Гибкая стенография). Затем я обнаружил, что flex-basis: content используется, когда flex-basis: auto. Расчетное значение flex-basis: content, по-видимому, описано в главе 9. Алгоритм Flex Layout.

авто

При указании в элементе flex ключевое слово auto извлекает значение свойства основного размера в качестве использованной основы flex. Если это значение само по себе auto, тогда используемое значение является содержимым.

содержание Указывает автоматический размер в зависимости от содержимого элементов Flex. (Как правило, он эквивалентен максимальному размеру контента, но с настройками для обработки форматных соотношений, внутренних ограничений по размеру и ортогональных потоков; см. подробности в §9 Алгоритма разметки Flex.)

Я прочитал эту главу 9. Тогда я знал, что предложение, относящееся к flex-basis, было 9.2.3-C Определение длины строки.

Если используемая основа Flex является содержимым или зависит от его доступного пространства, а размер контейнера Flex ограничен ограничением min-content или max-content (например, при выполнении автоматического размещения таблицы [CSS21]), задайте размер элемента в соответствии с этим ограничением. Размер базового гибкого элемента - это основной размер элемента.

.container {
  display: flex;
  border: 3px solid green;
  overflow-wrap: break-word;
}

.box1 {
  flex-basis: content;
  /* 'flex-basis: auto' works the same way */
  border: 3px solid red;
}
<div class="container">
  <div class="box1">flex-basis: content texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</div>
</div>

Ответы

Ответ 1

Прежде всего, свойство flex-based не имеет значения "content". Он поддерживает только эти четыре значения: "число, авто, начальное и наследовать". Если в моем ответе есть какая-либо ошибка, пожалуйста, сообщите мне, на основании ваших отзывов я улучшу свои знания. Спасибо... Больше информации - https://www.w3schools.com/cssref/css3_pr_flex-basis.asp