Изменение ширины не работает с гибким дисплеем

Question

У меня есть элемент flex, который я хочу раскрыть всякий раз, когда на нем наведен курсор.

Вот мой код:

HTML

    <div class="fixed-header">
        <div id="header"><h1>Physi_cs</h1></div>

        <div id="nav-list">
            <ul>
                <li><a href="#">Shop</a></li>
                <li><a href="#">Learn Physics</a></li>
                <li><a href="#">Articles</a></li>
                <li><a href="LoginPage.html">Log In</a></li>
                <li><a href="SignUpPage.html">Sign Up</a></li>
            </ul>
        </div>
    </div>

CSS

.fixed-header {
    background-color: rgba(237, 241, 242, 0.8);
    height: 25vh;
    padding: 20px 0px;

    display: flex;
    flex-direction: row;
    align-items: center;

    box-shadow:0px -1px 2px rgba(23, 37, 58, 0.8) inset;
}

.fixed-header #header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;

    height: 80%;
    box-shadow: 3px 0px 0px rgba(40, 40, 40, 0.8); /* ACTS AS A BORDER */

    cursor: pointer;
    transition: all ease 1s;
}

.fixed-header #header:hover {
    width: 50vw; // HERE I AM TRYING TO CHANGE THE WIDTH
}

Я хочу, чтобы мой #header расширялся в течение 1 секунды, а не мгновенно.

Заранее спасибо за помощь!

Answer 1

Добавление событий наведения и перехода:

.fixed-header #header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80%;
  box-shadow: 3px 0px 0px rgba(40, 40, 40, 0.8);
  cursor: pointer;
  transition: all ease 1s;
  flex-basis: 35%;
}

.fixed-header #header:hover {
  flex-basis: 75%;
}

Answer 2

Несколько вещей здесь.Похоже, что свойство, которое вы на самом деле хотите настроить, это flex-basis, а не width.Вам также необходимо удалить свойство flex-grow из заголовка:

https://jsfiddle.net/dtyxmpza/