Flex — элемент должен занимать столько же места, сколько и текст. ⇐ CSS

[Anonymous]

У меня есть гибкий контейнер и 2 элемента. Голубой элемент имеет несколько диапазонов. Чего я хотел бы добиться, так это сделать максимальную ширину голубого элемента такой же большой, как и текстовые интервалы. И гибкий элемент также должен быть такого же размера, как всегда переносит текст. Я предоставляю песочницу кода для тестирования. На снимке экрана видно, что голубой контейнер намного больше текста при определенной ширине области просмотра.

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

.flex-container {
display: flex;
align-items: center;
/* Align items vertically */
}

.flex-item {
flex-shrink: 1;
/* Allow items to shrink */
padding: 10px;
margin: 5px;
display: inline-flex;
align-items: center;
/* Center items vertically */
}

.light-blue {
background-color: #d9edf7;
/* Light blue background */
border-radius: 10px;
/* Rounded corners */
display: inline-flex;
/* Align children horizontally */
white-space: normal;
/* Allow text to wrap */
}

.blue {
background-color: #337ab7;
/* Blue background */
border-radius: 10px;
/* Rounded corners */
color: white;
/* White text */
padding: 10px 20px;
text-align: center;
}

/* Optional styling for icon */

.icon {
margin-right: 5px;
}

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

📅
Termine sind frei verfügbar

Termine anzeigen

Подробнее здесь: https://stackoverflow.com/questions/786 ... s-the-text