Обтекание плавающих элементов без overflow:hidden?

Question

[Melkon]

Добрый день.
Есть блок:

<div class="a">
  <div class="b"></div>
  <div class="c"></div>
  <div class="d"></div>
  <div class="e">
    <div class="f"></div>
  </div>
</div>

.a:after {
  content: '';
  display: table;
  clear: both;
}

.b {
  height: 50px;
  width: 100px;
  float: right;
  background: red;
}

.c {
  height: 50px;
  width: 100px;
  float: right;
  background: blue;
}

.d {
  height: 50px;
  width: 100px;
  float: right;
  background: green;
}

.e {
  overflow: hidden;
}

.f {
  height: 50px;
  background: violet;
}

Как можно получить ту же структуру, не меняя html код, убрав overflow: hidden у класса "e", и не добавив margin-right, так-как размеры у плавающих блоков не фиксированы ?
То есть чтобы блок "f" обтекал плавающих блоков как сейчас, а не занимал всю ширину блока "a".

https://jsfiddle.net/gy7pcaez/

Answer 1

[Melkon]

Я нашел одно решение, но по моему оно недостаточно изящное.
https://jsfiddle.net/gy7pcaez/1/

Answer 2

[Андрей Верх]

На выбор:

.e {
  display:table;
  display:flex;
}

Но лучше, вообще всё flex'ом сделать.