CSS image constrained by width of adjacent element - css

Question

I have a div than spans the entire width of the page. Then within that I have two images, one that's always 50x50 pixels, and then another one that is 400x90. The smaller image is floated to the right, and the larger one just remains on the left side.
I have it how I want it, except when I resize the window to smaller than the widths of the two images. When this happens, I would like the larger image to scale down, just to fill the remaining width. Instead now, it keeps its current width and jumps down underneath the smaller image.
What's the simplest way to make it scale down instead?
Here's a fiddle to illustrate the issue I'm having: https://jsfiddle.net/zdaujbaL/
And here's my code:
HTML
<div class="clearfix">
<a class="button">
<img src="//placehold.it/50x50">
</a>
<a class="logo">
<img src="//placehold.it/400x90">
</a>
</div>
CSS
div {
background-color: lightblue;
padding: 5px;
margin: 5px;
}
a.button {
float: right;
}
a.logo {
display: inline-block;
}
a.logo img {
width: 100%;
}

Answer 1

You should make the non-float element as block level and add overflow:auto
a.logo {
display: block;
overflow: auto;
}
a.logo img {
max-width: 100%;
}
JSFiddle: https://jsfiddle.net/zdaujbaL/5/
Alternatively, you could do it with CSS table + table-cell layout.
div {
background-color: lightblue;
display: table;
width: 100%;
padding: 5px;
}
a.button, a.logo {
display: table-cell;
vertical-align: top;
}
a.logo {
width: 100%;
}
a.logo img {
max-width: 100%;
}
(you'll need to update the order - logo first, button second in the markup)
JSFiddle: https://jsfiddle.net/zdaujbaL/6/