Почему гибкие элементы не уменьшаются до размера контента?

Question

У меня есть 4 столбца flexbox, и все работает нормально, но когда я добавляю некоторый текст в столбец и устанавливаю для него большой размер шрифта, столбец становится шире, чем должен быть из-за свойства flex.

Я пытался использовать word-break: break-word и это помогло, но все же, когда я изменяю размер столбца на очень маленькую ширину, буквы в тексте разбиваются на несколько строк (по одной букве в строке), и все же столбец не получает ширину меньше размера одной буквы.

Посмотрите это видео: http://screencast-o-matic.com/watch/cDetln1tyT (в начале первый столбец самый маленький, но когда я изменил размер окна, это самый широкий столбец. Я просто хочу уважать flex настройки всегда; гибкие размеры 1: 3: 4: 4)

Я знаю, что установка размера шрифта и отступов столбцов на меньшие поможет... но есть ли другое решение?

Я не могу использовать overflow-x: hidden,

JSFiddle: https://jsfiddle.net/78h8wv4o/3/

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

Answer 1

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

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

Сгибаемый элемент не может быть меньше размера его содержимого вдоль главной оси.

Значения по умолчанию...

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

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

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

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

---

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

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

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

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

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

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

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

а также...

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

---

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

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

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

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

Примеры:

• Элемент Flex не сжимается меньше, чем его содержимое
• Приспособление ребенка к родителю
• Свойство white-space css создает проблемы с 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
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

jsFiddle

Answer 2

Я обнаружил, что это неоднократно укусило меня на протяжении многих лет как для гибкости, так и для сетки, поэтому я собираюсь предложить следующее:

* { min-width: 0; min-height: 0; }

а затем просто используйте min-width: auto или min-height: auto если вам нужно такое поведение.

Фактически, добавьте также размер коробки, чтобы сделать все макеты более разумными:

* { box-sizing: border-box; min-width: 0; min-height: 0; }

Кто-нибудь знает, есть ли странные последствия? Я не встречал ничего за несколько лет использования сочетания вышеперечисленного. Фактически, я не могу вспомнить ни одного случая, когда я хотел бы разместить макет от содержимого вовне к гибкости / сетке, а не к гибкости / сетке внутрь к содержимому - и, конечно, если они существуют, они редки. Так что это похоже на плохой дефолт. Но может я чего-то упускаю?

Answer 3

Для этого кода ниже добавляем width: 100% решил мою проблему.

      .post-cover .inner {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
    word-break: break-all;
    z-index: 21;
}
.post-cover .article-page {
    padding: 20px 0;
    margin-bottom: 40px;
    font-size: 0.875em;
    line-height: 2.0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;   /* Add this */
}

Answer 4

Чистый ответ на ваш вопрос заключается в том, что по умолчанию браузеры имеют тенденцию отображать для читателя как можно больше информации (и ничего не скрывать).

Это происходит по умолчанию и даже включает отображение шрифтов черного цвета по умолчанию на белом фоне (для максимального контраста страницы и удобочитаемости), добавление полосы прокрутки, где содержимое больше, чем высота (или ширина) области просмотра, или отображение содержимого из разметки ( или цвет фона), даже если он был ошибочно помещен после или даже теги в html-файле.

В контексте CSS это также применимо, но помимо этого вам разрешено играть со многими настройками.

Даже на экране при использовании огромного шрифта (например, ) изначально действует как переполняющий элемент (и размещает шрифт внутри гибкого дочернего контейнера с помощью не изменяет это поведение по умолчанию, если вы не используете или изменить размер элемента каким-либо образом.

Элегантным решением является использование динамического изменения размера букв, например

font-size: calc(0.5em + 2vw)

который отлично работает даже в адаптивном сценарии.

Как уже упоминалось в предыдущем ответе, гибкий элемент не может быть меньше размера его содержимого вдоль главной оси (по той же причине, которая характерна не только для модели flexbox, реализованной в CSS, но и из-за внутреннего способа работы браузера). Даже длинное слово отображается с полосой прокрутки, если оно длиннее ширины экрана, как если бы оно было элементом блочного типа с фиксированным размером.

Это упоминается в старых спецификациях html 4.01 как

«По соглашению визуальные пользовательские агенты HTML оборачивают текстовые строки, чтобы они соответствовали доступным полям. Алгоритмы переноса зависят от форматируемого сценария.

В западных сценариях, например, текст должен переноситься только на пробелы. "

как показано здесь в параграфе 9.5.3. Это означает, что с тех пор текст должен был отображаться непрерывно по умолчанию (если только мы не решим разделить его, но не на уровне отдельных символов: один небелый символ, отображаемый размером 120em, вызовет отображение полос прокрутки в браузере).

Слова также четко определены в пункте 9.1 того же источника:

мы используем термин «слово» здесь для обозначения «последовательности символов, отличных от пробелов».

Цель отображения исходного формата любого слова — не уничтожить, не скрыть и не исказить исходную информацию, смысл или замысел автора кода. Таким образом, у нас также есть для хранения в одной строке двух связанных слов - их разрыв может быть разрушительным (например, Нью-Йорк, 22:00, 10 км/ч, § 10 и т. д.)

Answer 5

Наиболее эффективным решением на данный момент является использование-webkit-line-clamp: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp

Вы можете указать количество строк для сохранения, например 1.

Старое решение, основанное наmin-width: 0не работает на сложных макетах с широким использованиемflex.

Answer 6

Я пробовал все, даже помещал приведенный ниже код в index.css.

      * {
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

Но ничего не сработало.

наконец, я сделал div, который я хотел уменьшить, чтобы он был содержимым . Затем он начал уменьшаться. Родительскому div потребуется определенная высота и ширина. Это может быть не лучшим решением для каждого сценария, но если это сработает для вас, хорошо!

Answer 7

Как насчет: