Zoom out to the minimum width before wrapping around the following items.

Question

I make a pretty simple responsive website. I have a logo in which the logo is placed on small screens, and on the left - on large screens. Everything works the way I want (try resizing jsfiddle), except that I want the div logo to shrink to the minimum width before the links wrap to the next line. I don’t know how to say it, but I want the div logo to change depending on whether the links are clicked (if they have enough space). When it reaches the minimum width, the links should be wrapped. Not sure if this is possible, but I decided that I would ask anyway.

Here is the 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

flexboxes. , .

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 , .

Answer 2

, , , - . .

CSS, . display, ( , IE) . : http://jsfiddle.net/mfvf8/

:

.header
{
    display: table;
    width: 100%;
}

.header > div
{
    display: table-cell;
}

.header .link
{
    white-space: nowrap;
    width: 1px;
}

, , . divs . (1px) , . div, . , 1px, , .

, . div. , , .

, . , , jsfiddle, "" div max-width div.