两个div除了彼此之外，内容包装来自第二个div

Question

我正在寻找一个解决方案，在<td>中将两个div放在另一个旁边。
第一个div元素是一个固定大小的图像 第二个div元素是未知长度的链接（文本）。

我想在调整浏览器窗口大小时包装第二个div的内容，但包装的内容不应出现在图像下方（div-1），不应该流出行。

预期行为应如下所示：

目前的行为如下所示：

有一个类似的question，但在那里不期待包装，我希望包装在我的第二个div中。

谢谢你的帮助

我目前的代码是：

<td class="infoElement" data-ng-if="::!item.empty">
 <div style="overflow: auto">
    <div style="display: inline-block" class="ListIcon" data-context-link="item"></div>
    <div style="overflow: hidden; display: inline-block;">
        <a data-ng-bind="::item.displayName"></a>
    </div>
 </div>
</td>

Answer 1

实现这一目标的最简单方法是使用Flexbox。

https://jsfiddle.net/Lnocagr2/2/

HTML：

<div class="container">
  <section>
    <div class="smallDiv">
      smalldiv
    </div>
    <div class="largeDiv">
      <ul>
        <li>bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla</li>
        <li>foo</li>
        <li>bar</li>
      </ul>
    </div>
  </section>
  <section>
    <div class="smallDiv">
      smalldiv
    </div>
    <div class="largeDiv">
      <ul>
        <li>bla</li>
        <li>foo</li>
        <li>bar</li>
      </ul>
    </div>
  </section>
  <section>
    <div class="smallDiv">
      smalldiv
    </div>
    <div class="largeDiv">
      <ul>
        <li>bla</li>
        <li>foo</li>
        <li>bar</li>
      </ul>
    </div>
  </section>
</div>

CSS：

.container{
  width:100%;
}
section{
  width:100%;
  display:flex;
  flex-direction:row;
}
.smallDiv{
  width:100px;
}
.largeDiv{
  flex:1;
}