css: matching the width of elements while expanding parent - css

Question

I have a div of set width (as a percentage of its parent) which contains a number of child rows. I want the width of these rows to always match each other- so the row with the widest content would determine the width of the others. However, this width may also be larger than the containing div, in which case that div would need to expand to accommodate the child rows.
Here is my HTML:
<div class="outer">
<div class="inner">
<div class="block-wrapper">
<h2>First heading</h2>
<h2>Another heading</h2>
<h2>The third heading which could be quite long</h2>
</div>
</div>
</div>
And current CSS:
.outer {
width:1000px;
background-color:#000;
height:1000px;
}
.inner {
width: 80%;
background-color:#FFF000;
height:50%;
}
.block-wrapper {
width: 40%;
background-color:#fff000;
height:100%;
}
h2 {
font-size:18px;
width: 100%;
float: left;
clear: left;
line-height: 40px;
margin-top: 10px;
padding:1%;
background-color:rgba(0,0,0,0.75);
}
Here is a JS Fiddle.
So my problem is the third row there, "The third heading..." Should be all on one line, with the other h2 rows expanding to the same width. The minimum width for the h2 rows should be the width of the parent div.
I hope this makes sense... any ideas?

Answer 1

Update your .block-wrapper with width:auto and display:inline-block.
.block-wrapper {
width: auto;
min-width:40%;
background-color:#fff000;
height:100%;
display:inline-block;
}
DEMO

Answer 2

inline-block and width:auto on your .block-wrapper should help. Plus you'll need to lose that padding 1% on the h2 to avoid confusing it. There are other ways you can add that in.
http://jsfiddle.net/guxkcqyz/
.outer {
min-width:1000px;
background-color:#000;
height:1000px;
}
.inner {
width : 80%;
background-color:#FFF000;
height:50%;
}
.block-wrapper {
background-color: red;
width : auto;
display : inline-block;
height:100%;
}
h2 {
font-size:18px;
line-height: 40px;
margin-top: 10px;
background-color:rgba(0,0,0,0.75);
}