У меня есть flex-контейнер с направлением столбца info__text-container, ширина которого составляет 150 пикселей. Внутри у меня есть два пролета с текстом, который можно перенести на следующую строку. То, что я хочу, - это сгибать элемент flex к содержимому при переносе текста, но он всегда остается 150px. Слова генерируются динамически, поэтому я не могу просто использовать <br/> или что-то в этом роде. Что у меня есть Что я хочу
body {
font-family: sans-serif;
}
.info {
display: flex;
align-items: center;
}
.info__block-margin {
margin-right: 48px;
}
.info__number {
font-size: 40px;
}
.info__number-margin {
margin-right: 20px;
}
.info__text-container {
display: flex;
flex-direction: column;
max-width: 150px;
}
.info__text {
min-width: 0;
font-size: 16px;
font-weight: bold;
line-height: 25px;
}
.info__subtext {
min-width: 0;
font-size: 14px;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<div class="info info__block-margin">
<p class="info__text-container">
<span class="info__text">Socially SignificantSo </span>
<span class="info__subtext">Socially SignificantSocial</span>
</p>
<span class="info__number">98</span>
</div>
<script src="src/index.js"></script>
</body>
</html>
ПРИМЕР
Заранее спасибо.