Make element scale down to min-width before next elements wrap - html

Question

I am making a fairly simple responsive website. I have a logo div that keeps the logo centered on small screens, and to the left on big screens. Everything is working how I want it to, (try resizing the jsfiddle) except that I want the logo div to scale down to it's min-width before the links wrap to the next line. I'm not sure how to word this, but I want the logo div to resize based on if the links are pushing it (if they have enough room). When it reaches it's min-width, then the links should wrap. Not sure if this is possible, but I figured I'd ask anyway.
Here is the jsfiddle.
The 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>
The 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;
}
I hope I was clear, I'm still learning. Let me know if I need to add any more details.

Answer 1

I went looking some more and found flexboxes. Got them to do exactly what I wanted.
http://jsfiddle.net/3525C/10/
My new 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>
and 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;
}
Thanks hexalys for helping me get it working.

Answer 2

The only real thing that responds the way you're talking is a table. Table cells have the capability of being flexible with their width.
You can use CSS to make this happen. It's a more modern display, so not all browsers (looking at you, older IE) will support it. But this should get you started: http://jsfiddle.net/mfvf8/
Here's what I added as a proof of concept:
.header
{
display: table;
width: 100%;
}
.header > div
{
display: table-cell;
}
.header .link
{
white-space: nowrap;
width: 1px;
}
I set the header to be displayed as a table, and gave it full width. I made all of the child divs act like a table cell. I made the links minimum width (1px) and said not to wrap whitespace. With regular divs, that would overflow. With table cells, that means it tries to be 1px wide but will expand to fit its content.
The rest of a table row's width will go evenly to whichever cells are left over that don't have a set width. In this case, it's the logo div. Then, as you shrink the window, it will slowly start to shrink the logo as needed.
You will need to tweak this to fit your design better. If you don't want your nav pushed all the way to the right like it is in the jsfiddle, you might need a "buffer" div to the far right, or different width settings, or a set max-width on the header div.