Html 内部带有内联块的div自动溢出

我有下一个标记：

<div style="border: 1px solid black; width: 200px; height: 60px; overflow-x: auto">
    <img src="/images/thumbs/doc.png" width="100" height="60" style="display: inline-block; vertical-align:middle;">
    <div style="display: inline-block; vertical-align: middle;">test</div>
</div>

测试

---

实际上，我使用jquery ui可调整大小的插件。当我调整外部div的大小并且它变得太小时，我希望显示水平滚动条。但是，图像附近的标签会下降。如何防止这种影响？理想情况下，我希望将文本溢出：省略号效果也应用到标签上，因此首先它会用“…”短接，然后出现滚动条。但是，当我设置小宽度时，我不知道如何防止标签“test”下降，我想您应该在样式的外部div中使用

空白：nowrap

<div style="border: 1px solid black; width: 200px; height: 60px; overflow-x: auto; white-space: nowrap;">
    <img src="/images/thumbs/doc.png" width="100" height="60" style="display: inline-block; vertical-align:middle;">
    <div style="display: inline-block; vertical-align: middle;">test</div>
</div>

测试

创建精确的代码，或者尝试使用最小宽度选项：谢谢，这正是我需要的