排列div并控制调整大小行为

Question

（这是JSFiddle）

我有一个容器分为三个部分：

• 容器： 100％宽度
• A：
内有0或1个按钮
• B：必须占据水平宽度的其余部分，直到显示所有孩子，没有包装，溢出被隐藏（内容流“离屏幕”）
• C：没有换行，
内有0到3个按钮

当它缩小尺寸时， B 会变小并隐藏任何不适合的东西：

当它调整大小时，应调整大小，直到 B 中的所有内容都可见，然后 C 占用剩余空间：

当我调整大小时，我无法让 C 留在屏幕上，只需 B 变小。

HTML：

<div class="container">
    <div class="left">
        <button>Button0</button>
    </div>
    <div class="nav-container">
        <ul class="middle">
            <li>Tab 1</li>
            <li>Tab 2</li>
            ..
            <li>Tab n</li>
        </ul>
    </div>
    <div class="right">
        <button>Button1</button>
        <button>Button2</button>
        <button>Button3</button>
    </div>
</div>

CSS：

.container {
    width:100%;
    overflow: hidden;
    white-space: nowrap;
}

.left {
    float:left;
}

.middle {
    float:left;
    white-space: nowrap;
    overflow: hidden;
}

.right {
    width:auto;
    overflow:hidden;
}

ul {
    list-style-type: none;
}

.nav-container ul li {
    display: inline;
}

（这是JSFiddle）

Answer 1

尝试删除＆＃39;中间＆＃39; ul标记中的类，并将该类添加到＆＃39; nav-container＆＃39; div，所以它有两个类。

<div class="nav-container middle">
    <ul>
        <li>Tab 1</li>
        <li>Tab 2</li>
        ..
        <li>Tab n</li>
    </ul>
</div>