Почему не работает переход для плавной регулировки ширины при наведении курсора? [дубликат] ⇐ CSS

[Anonymous]

Я пытаюсь создать макет, в котором элемент в стороне плавно увеличивает свою ширину при наведении курсора.
Сетка настроен с использованием grid-template-columns: max-content 1fr, и я ожидаю, что элемент aside расширится в соответствии с его содержимым (max-content) с плавным переходом. Однако переход, похоже, работает не так, как ожидалось.
Чтобы упростить мой вариант использования:
Сначала в сторону показывает только значки. Я хочу, чтобы при наведении отображались значки с текстом, а ширина в сторону должна плавно увеличиваться во время наведения.
The .text-box — это элемент p, который является дочерним элементом aside и родственным элементом icon *(image). По умолчанию для .text-box установлено значение display: none, и оно становится видимым (display:block), когда в сторону.
Вот код CSS:

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

.grid-con {
display: grid;
grid-template-columns: max-content 1fr;
grid-auto-flow: auto;
grid-template-areas:
"aside main"
"aside main"
"footer footer";
min-height: 100vh;

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

aside {
grid-area: aside;
border-radius: 20px;
padding: var(--sp-xm);
background-color: #fff;
transition: all 0.5s linear;

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

aside .text-box {
display: none;

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

aside: hover .text-box {
display: block;

Подробнее здесь: https://stackoverflow.com/questions/791 ... en-hovered