CSS Flex Element не сокращается при обертке текста [дублировать] ⇐ Html

[Anonymous]

У меня есть гибкий контейнер с H2 и ссылкой. При определенных размерах экрана текст в H2 обертываниях - что в порядке. Однако, когда текст завершается, H2 все еще использует как можно больше места. Вы можете увидеть это в приведенном ниже примере - есть много дополнительного синего пространства. < /P>
Я бы хотел, чтобы H2 < /code> чтобы быть только таким широким, как это необходимо, чтобы сдержать текст, и для того, чтобы текст мог обернуть только тогда, когда я не достаточно, чтобы его было на одной строке. H2 to fit-content и min-content . min-content вид делает то, что я хочу, но это вызывает обертывание слов в всех размерах
[*] Настройка: Flex-Basis: Auto; Flex-grow: 0, Flex-Shrink: 1 -без изменения
[*] Настройка Дисплята: Inline Block на H2-без изменения.
Изменение H2 на Span . Это работает, но тогда у меня нет заголовка. Это заставляет меня думать, что проблема заключается в том, что H2 < /code> является элементом блока-но ничего, что я пробовал, не имеет какого-либо эффекта. < /Li>
< /ul>


praity-gitle-> prete-vrint-grite-> prety-code-cssr

Код: Выделить всё

.container{
display:flex;
align-items:center;
background:green;
gap:2;
width:200px; /* Only set to mimic a constrained container width */
flex-grow:0;
flex-shrink:1;
flex-basis:auto;
}
h2{
background:blue;
}
a{
background:red;
}< /code>

Featured Publications
[url=#]To Top[/url]

Подробнее здесь: https://stackoverflow.com/questions/796 ... xt-wrapped