最小宽度，最大宽度和缩小以适合父级

Question

我有几个横向布置的项目应该：

1. 始终保持一排（永远不要破坏新线）。
2. 宽度不应大于其内容或最大宽度，以较小者为准。
3. 当max-width限制其宽度时，用省略号截断。
4. 宽度不小于最小宽度。

这些项目共享同一个父项。 如果父级的宽度太小而无法使用上述规则包含项目，则项目应按宽度方式缩小，但不得超过其最小宽度。

编辑：换句话说，如果父母大于孩子的总宽度，那很好。 孩子们不应该扩大以填补父母。 如果父项小于子项的总宽度（数字1,2,3和4），则子项应缩小以保持在新的父项宽度内。 在Chrome的浏览器标签中可以看到一个这样的例子（实际上我正在尝试重现的内容）。 标签具有最大宽度和最小宽度。 如果你开始缩小浏览器的宽度，那么它将达到标签不再适合的点，这样它们就会开始收缩，直到它们达到它们的最小宽度。

我已经确定了数字1,2,3和4，但我不知道如何让它们缩小以保持在父宽度内。 任何帮助将非常感激。

示例HTML：

<div class="container">
    <div class="tab"><span>Bookmark</span></div><div class="tab"><span>Finish</span></div><div class="tab"><span>A</span></div><div class="tab"><span>Kala kazoo A Roosky Fantastic</span></div>  
</div>

CSS示例：

.container {
    border: 1px solid blue;
    white-space: nowrap;
}

.tab {
    display: inline-block;
    border: 1px solid red;
}

.tab span {
    display: inline-block;
    width: 100%;
    min-width: 20px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

JSFiddle： http ： //jsfiddle.net/ug3en/

目标浏览器：IE9 +，现代Chrome，现代Firefox和现代Safari。

Answer 1

如果将max-width:25%添加到.tab类，它将确保选项卡不会溢出。

但是，仍然没有填写主栏，所以我建议你使用媒体查询来定位小宽度：在小模式下删除.tab span { max-width: 100px }并允许每个tab-span到填写容器的1/4。

试试这个小提琴 。

Answer 2

试试下面的CSS ：

.container {
    border: 1px solid blue;
    white-space: nowrap;
    width:auto;
    position:absolute;
}