如何在单行div中实现文本换行（兼容CSS2与dompdf）

现有一组模拟表格行样式的div，需确保最后一个div不会超出父容器范围，而是自动换行并保持在行尾位置，且仅可使用CSS2语法。
当前使用display: contents可达成预期效果，但该属性无法兼容PDF生成工具dompdf，因此需要可行的替代方案。

当前实现代码及效果 #

CSS代码 #

.foo { width: 50%; white-space: nowrap;}

.foo > div {
  display: inline-block;
  white-space: normal;
}

.a, .b, .c { width: 150px; background: yellow;}
.d { width: auto; }

HTML代码 #

<div class='foo'>
  <div class='a'>a</div>
  <div class='b'>b</div>
  <div class='c'>c</div>
  <div class='d'>this text is very long it should break into lines</div>
</div>

当前效果：最后一个带长文本的div（.d）被挤到下一行，单独占据整行，未实现跟随前面元素并在行尾自动换行的布局。

预期效果（使用display: contents实现，但不兼容dompdf） #

CSS代码 #

.foo { width: 100%; }

.foo > div {
  float: left;
}

.a, .b, .c { width: 150px; background: yellow; }
.d { width: auto; display: contents;  }
.e { white-space: normal; display: table-cell; }

HTML代码 #

<div class='foo'>
  <div class='a'>a</div>
  <div class='b'>b</div>
  <div class='c'>c</div>
  <div class='d'>
    <div class='e'>this text is very long is should break into lines</div>
  </div>
</div>

预期效果：前三个黄色块（.a/.b/.c）左浮动排列，最后一个div内的长文本（.e）紧跟在.c之后，自动填充父容器剩余宽度，文本超出时自动换行，不会被挤到下一行单独显示。

内容的提问来源于stack exchange，提问作者greener