在下一个元素换行之前将元素缩小到最小宽度

Question

我正在制作一个相当简单的响应式网站。我有一个徽标 div，它使徽标在小屏幕上居中，在大屏幕上保持在左侧。一切都按我希望的方式工作，（尝试调整 jsfiddle 的大小），除了我希望徽标 div在链接换行到下一行之前缩小到它的最小宽度。我不知道如何表达，但我希望徽标 div 根据链接是否推动它来调整大小（如果它们有足够的空间）。当它到达它的最小宽度，然后链接应该换行。不确定这是否可能，但我想我还是会问。

这是 jsfiddle。

html：

<div class="header">
  <div class="logo">logo</div>
  <div class="link">link one</div>
  <div class="link">link two</div>
  <div class="link">link three</div>
</div>

css：

.header {
    text-align: center; /* Centers the logo text, and centers the links between the logo div and the other side of the page.*/
}
.logo {
    max-width: 300px;
    min-width: 100px;
    width: 100%; /* It is always the min-width without this*/
    background-color: red;
    display: inline-block;
    float: left;
}
.link {
    display: inline-block;
    background-color: green;
}

我希望我很清楚，我还在学习。如果我需要添加更多细节，请告诉我。

Answer 1

我又去找了一些，发现了弹性盒。让他们完全按照我的意愿去做。

http://jsfiddle.net/3525C/10/

我的新 HTML：

<div class="header">
    <div class="logo">logo</div>
    <div class="nav">
        <div class="link">link one</div>
        <div class="link">link two</div>
        <div class="link">link three</div>
    </div>
</div>

和CSS：

.header {
    text-align: center;
    display: flex;
    flex-flow: row wrap;
}
.logo {
    flex: 1 0 auto;
    min-width: 100px;
    background-color: red;
}
.nav {
    flex: 1 1 auto;
    background-color: lightgray;
    text-align: center;
}
.link {
    display: inline-block;
    background-color: green;
}

感谢hexalys 帮助我让它工作。