CSS: переход ширины во flexbox

Question

У меня есть элемент, который имеет html этого:

<div class="email-section full-width">
   <video src="/////"></video>
   <button>Press Me</button>
</div>

Кнопка имеет обработчик javascript, который удаляет класс full-width из div. Однако ширина постепенно не уменьшается. Он ждет 3 секунды, затем фиксирует его до 50%. Я не уверен, что я делаю не так с этим.

.email-section {
    flex-grow: 1;
    width: 50%;
    transition: width 3s ease;

    &.full-width {
      flex-grow: 1;
      width: 100%;
    }
}

Answer 1

Вам необходимо удалить свойство flex-grow:

$('button').click(function() {
  $('.email-section').toggleClass('full-width');
});

.flex-parent {
  display: flex;
}

.email-section {
  flex-basis: 50%;
  background: red;
  transition: all 3s ease;
}

.email-section.full-width {
  flex-basis: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="flex-parent">
  <div class="email-section">
    <button>Press Me</button>
  </div>
</div>

Вот скрипка:

https://jsfiddle.net/Ls3wkcob/

Технически вы можете сохранить свойство width вместо переключения на flex-basis, но так как это дочерний элемент flex, вероятно, лучше использовать flex-basis.

Fiddle с использованием width:

https://jsfiddle.net/Ls3wkcob/1/