Переопределить ширину части моего вертикального соответствия CSS

Question

Я хотел создать чистый CSS вертикальный аккордеон с 3 делителями, при этом средний всегда сохранял свою ширину (40%).В исходном состоянии мои 3 деления должны быть такими:

• Первый дел: 30% от ширины
• Второй дел: 40% от ширины
• Последнийdiv: 30% ширины

Когда первый или последний элемент div наведен, он должен расширяться до ширины 58%.

Однако последний элемент div не расширяетсякак я хочу, из-за начальной ширины моего элемента, установленной на 30%:

body {
  margin: 0;
  height: 100%;
}

.donslide {
  display: table;
  width: 100%;
  height: 400px;
}

.donslide .item {
  display: table-cell;
  background: #ddd;
  width: 30%;
  transition: 0.6s ease-in-out all;
  overflow: hidden;
  position: relative;
}

.center {
  display: table-cell;
  width: 40%;
  background: black;
}

.item:hover {
  width: 58%;
}

<div class="donslide">
  <div class="item"></div>
  <div class="center"></div>
  <div class="item"></div>
</div>

Если я удаляю настройку ширины своего элемента, все работает как шарм, но переход:

body {
  margin: 0;
  height: 100%;
}

.donslide {
  display: table;
  width: 100%;
  height: 400px;
}

.donslide .item {
  display: table-cell;
  background: #ddd;
  transition: 0.6s ease-in-out all;
  overflow: hidden;
  position: relative;
}

.center {
  display: table-cell;
  width: 40%;
  background: black;
}

.item:hover {
  width: 58%;
}

<div class="donslide">
  <div class="item"></div>
  <div class="center"></div>
  <div class="item"></div>
</div>

Как мне заставить мой аккордеон работать, сохраняя сладкий переход?

Answer 1

Flex box - ваш спаситель, вы можете воспользоваться свойством flex-grow, чтобы получить желаемый эффект

См. Фрагмент кода

body {
  margin: 0;
  height: 100%;
}

.donslide {
  display: flex;
  width: 100%;
  height: 400px;
}

.donslide .item {
  background: #ddd;
  transition: 0.6s ease-in-out all;
  overflow: hidden;
  width: 0%;
  flex-grow:1;

}

.center {
  width: 40%;
  background: black;
}

.item:hover {
  width: 60%;
}

<div class="donslide">
  <div class="item"></div>
  <div class="center"></div>
  <div class="item"></div>
</div>