Как обойти flex-direction для 1 елемента?

Question

[Wasya UK]

Пытаюсь изменить размер на 100% при наведении на секцию, но не получается. Работает только вариант, когда использую min-width: 100%. Но в таком случае не работает transition. Как сделать так, чтобы при наведении блок становился на 100% ширины и не менять при этом display: flex, и не задавать фиксированную ширину секциям?

https://codepen.io/wasya1212/pen/rNxPKBV

Comments

[Ankhena]

Поясните, какого результата вы хотите достичь?
Сейчас вы меняете при наведении ширину 100% на 100% и block на block (то что вы вначале написали inline-block значения не имеет, у этих элементов родитель флекс, а значит, они block). Новое свойство только про курсор.

[RAX7]

так?

.main-preview__section:hover {
    flex-shrink: 0;
}

[Wasya UK]

Ankhena, там стояла min-width, потом изменил на width для вопроса, думал будет лучше для понимания) Но ответ уже дал RAX7) За display не знал, спс)

[Wasya UK]

RAX7, Просто ТОП) спс

Answer 1

[Wasya UK]

&__section
    display: inline-block
    position: relative
    border: 1px solid black
    width: 100%
    height: 100%
    box-sizing: border-box
    overflow: hidden
    transition: all 1s ease-in-out
    &:hover
      cursor: pointer
      flex-shrink: 0