Use max-width while inside inline-block element - html

Question

I have a two column layout with one fixed column and one column of variable size with a min-width and a max-width. The columns should be flush with each other so there is no space.
An image of what I'm looking for http://imgur.com/RQXXaoz
Here's what I tried
JsFiddle: http://jsfiddle.net/49krdtf6/4/
.superOuter
{
background-color:#C0C0F0;
padding:20px;
text-align:center;
}
.outer
{
display:inline-block;
padding:20px;
background-color:#F0C0C0;
}
.test
{
overflow:hidden;
min-width:100px;
max-width:400px;
background-color:#F0F0F0;
padding:20px;
}
.test2
{
float:right;
width:200px;
padding:20px;
background-color:#F0F0C0;
}
<div class="superOuter">
When there's not enough content:<br>
<div class="outer">
<div class="test2">
Fixed content
</div>
<div class="test">
Rest with BFC
</div>
</div>
</div>
<br><br>
<div class="superOuter">
I want it to look like this (that is unless the page shrinks)<br>
<div class="outer">
<div class="test2">
Fixed Content
</div>
<div class="test">
Larger text here and it makes the whole thing go to the big size which is what I want without all the text
</div>
</div>
</div>
The problem I'm having is that my variable width column will not grow to it's max-width and is stuck at the width determined by its content.

Answer 1

You can use display table and table-cell to achieve this. Another difference is to discard max-width and go for just width instead.
* {
box-sizing:border-box;
}
.superOuter {
width:100%;
padding:20px;
text-align:center;
background-color:#C0C0F0;
}
.outer {
display:table;
width:100%;
padding:20px;
background-color:#F0C0C0;
}
.fixed {
display:table-cell;
width:400px;
padding:20px;
background-color:#F0F0F0;
}
.fluid {
display:table-cell;
padding:20px;
background-color:#F0F0C0;
}
<div class="superOuter">
When there's not enough content:
<br />
<div class="outer">
<div class="fixed">Fixed content</div>
<div class="fluid">Rest with BFC</div>
</div>
</div>
jsFiddle demo
UPDATE
After discussing in the comments, I believe you actually have a limit for both columns width, one being 400px and the other, 800px.
Something like this:
* {
box-sizing:border-box;
}
.superOuter {
width:100%;
text-align:center;
padding:20px;
background-color:#C0C0F0;
}
.outer {
display:table;
width:100%;
padding:20px;
background-color:#F0C0C0;
}
.fixed {
display:table-cell;
width:400px;
padding:20px;
background-color:#F0F0F0;
}
.fluid {
display:table-cell;
width:800px;
padding:20px;
background-color:#F0F0C0;
}
<div class="superOuter">
When there's not enough content:
<br />
<div class="outer">
<div class="fixed">Fixed content</div>
<div class="fluid">Rest with BFC</div>
</div>
</div>
jsFiddle demo

Answer 2

Is this what you are looking for?
https://jsfiddle.net/retr0ron/
What I've done here is rearranged your content in the HTML-document (notice that there can't be whitespace between the divs where I removed it, otherwise you will see a small gap between them (because of how inline-elements behave).
HTML:
<div class="superOuter">
When there's not enough content:<br>
<div class="outer">
<div class="test">
Rest with BFC
</div><div class="test2">
Fixed content
</div>
</div>
</div>
<br><br>
<div class="superOuter">
I want it to look like this (that is unless the page shrinks)<br>
<div class="outer">
<div class="test">
Larger text here and it makes the whole thing go to the big size which is what I want without all the text
</div><div class="test2">
Fixed Content
</div>
</div>
</div>
CSS:
.outer
{
max-width:600px;
min-width: 380px;
padding:20px;
background-color:#F0C0C0;
margin:0 auto;
}
.test
{
overflow:hidden;
min-width:100px;
background-color:#F0F0F0;
padding:20px;
}
.test2
{
float:right;
width:200px;
padding:20px;
background-color:#F0F0C0;
}