Symfony 3.2 - установить переменные среды во время выполнения [дубликат]

Автоматический минимальный размер элементов Flex

Вы сталкиваетесь с настройкой по умолчанию для flexbox.

Элемент flex не может быть меньше размера его содержимого вдоль

По умолчанию ...

• min-width: auto
• min-height: auto

... для гибких элементов в направлении строки и столбца соответственно.

Вы можете переопределить эти значения по умолчанию, установив элементы гибкости:

• min-width: 0
• min-height: 0
• overflow: hidden (или любое другое значение, кроме visible)

---

Спецификация Flexbox

4.5. Автоматический минимальный размер элементов Flex

Чтобы обеспечить более разумный минимальный размер по умолчанию для элементов flex, эта спецификация вводит новое значение auto в качестве начального значения min-width и min-height, определенные в CSS 2.1.

blockquote>

Что касается значения auto ...

В элементе flex чей overflow является visible на главной оси, если указано в параметре минимального размера основной оси гибкого элемента, задается автоматический минимальный размер . В противном случае он вычисляется в 0.

blockquote>

Другими словами:

• Значения min-width: auto и min-height: auto применяются только тогда, когда overflow имеет значение visible.
• Если значение overflow не visible, значение свойства min-size равно 0.
• Следовательно, overflow: hidden может быть замените min-width: 0 и min-height: 0.

и ...

• Алгоритм минимального размера применяется только к главной оси.
• Например, элемент flex в контейнере с указателем строки не получает min-height: auto по умолчанию.
• Более подробное объяснение см. в этом сообщении: рендеринг минимальной ширины по-разному в flex -direction: row и flex-direction: column

---

Вы применили min-width: 0, и элемент все еще не сжимается?

Вложенные контейнеры Flex

Если вы используете элементы flex на нескольких уровнях структуры HTML, может потребоваться переопределить значение по умолчанию min-width: auto / min-height: auto на элементах на более высоких уровнях.

В принципе, более высокий уровень сгибает его em с min-width: auto может предотвратить сжатие элементов, вложенных ниже, с помощью min-width: 0.

Примеры:

• Элемент Flex не уменьшается меньше его содержимого
• Установка дочернего элемента в родительский
• свойство пробела white-space создает проблемы с flex

---

Примечания к визуализации браузера

• Chrome против Firefox / Edge . Как минимум 2017, Chrome выглядит как (1), возвращаясь к min-width: 0 / min-height: 0 по умолчанию или (2) автоматически применяя 0 по умолчанию в определенных ситуациях, основанных на тайном алгоритме. (Это может быть то, что они называют вмешательством .) В результате многие люди видят, что их макет (особенно желаемые полосы прокрутки) работают должным образом в Chrome, но не в Firefox / Edge. Эта проблема более подробно рассмотрена здесь: несоответствие гибких ограничений между Firefox и Chrome
• IE11 Как отмечено в спецификации, значение auto для свойств min-width и min-height является «новым». Это означает, что некоторые браузеры могут по-прежнему отображать значение 0 по умолчанию, поскольку они реализовали гибкую компоновку до того, как значение было обновлено, и поскольку 0 является начальным значением для min-width и min-height в CSS 2.1 . Одним из таких браузеров является IE11. Другие браузеры обновлены до более нового значения auto, как определено в спецификации flexbox .

---

Пересмотренная демонстрация

.container {
  display: flex;
}

.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}

.col1 {
  flex: 1;
  background: orange;
  font-size: 80px;
  min-width: 0;   /* NEW */
}

.col2 {
  flex: 3;
  background: yellow
}

.col3 {
  flex: 4;
  background: skyblue
}

.col4 {
  flex: 4;
  background: red
}

  
Lorem ipsum dolor
  
Lorem ipsum dolor
  
Lorem ipsum dolor
  
Lorem ipsum dolor

jsFiddle