Prevent text from expanding div without JS or table-caption - html

Question

My issue is solved using display:table-caption but that seems incorrect (since it's not actually a table caption). So my question is what is table-caption doing that solves my issue, and can that be achieved with different CSS?
My original issue: I have a container div and within that are header, details, and footer divs. The header (and less importantly footer) text should remain on a single line (no wrapping) and the container div should shrink-wrap (expand and shrink width) to fit those single line elements. However, the details div should NOT be allowed to expand the container div. Instead the details text should simply wrap as per whatever width the container happens to be (which would be a result of the length of the header and/or footer text).
I have found that this seems to be achievable using the display:table-caption style.. however this doesn't seem like an appropriate style to use (on something that isn't a table caption).
See example: https://jsfiddle.net/uac032q4/1/
Note the display: table-caption in the .container's style.
.container {
display: table-caption;
background-color: white;
}
.heading {
font-size: 4em;
}
.details {
background-color: yellow;
}
.nowrap {
white-space: nowrap;
}
<div class="container">
<div class="heading nowrap">Strech Dont Wrap</div>
<div class="details">
This is the paragraph that should wrap down once it reaches the available width provided by the container box which in turn is stretched to that width by the nowrap heading text.
</div>
<div class="nowrap">Footer</div>
</div>
So, using only CSS (no JS) and without fixed widths: is there an alternate CSS solution without using table-caption? and what is table-caption doing that is solving the wrapping issue?
Note that there is an existing question that is essentially the same thing, however the accepted answer uses JS and the alternate answer uses display:table-caption:
Prevent text from expanding shrink wrapped div