Как сделать мой `` соответствовать ширине своего родителя, не затрагивая родителя ⇐ CSS

[Anonymous]

Это мое минимальное воспроизведение (работает только в браузерах хрома из-за Call-size < /code>): < /p>

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

.parent {
display: flex;
align-items: start;
}

.item {
display: flex;
flex-direction: column;
background: orange;
}

p {
box-sizing: border-box;
overflow: hidden;
}

.long {
width: 100%;
opacity: 0;
margin: 0;
padding: 0;
overflow: hidden;
white-space: nowrap;
transition:
width 3s,
opacity 3s;
}

.item:hover .long {
height: 1.5rem;
width: calc-size(auto, size);
opacity: 1;
}< /code>


Good test.
Yappity yap yap yap.

Я недавно переключился с ширины: 0 на ширину: 100% для долгого абзаца, чтобы сделать анимацию более известной (без анимирования с абсолютного начала), но он не работает, как Intended. Он делает контейнер шире, когда он находится в свернутой форме (хотя, как ни странно, работает нормально , пока анимация).
Так что я могу сделать? Как мне либо сделать ширину: 100%< /code> не повлиять на ширину родителя, либо иным образом использовать доступную ширину в коллапс -состоянии для начальной ширины в анимации вместо 0? Ширина): < /p>

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

.parent {
display: flex;
align-items: start;
}

.item {
display: flex;
flex-direction: column;
background: orange;
}

p {
box-sizing: border-box;
overflow: hidden;
}

.long {
width: 75px;
opacity: 0;
margin: 0;
padding: 0;
overflow: hidden;
white-space: nowrap;
transition:
width 3s,
opacity 3s;
}

.item:hover .long {
height: 1.5rem;
width: 157px;
opacity: 1;
}< /code>


Good test.
Yappity yap yap yap.

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