title: Is it possible to size container by the width of only one of its children?
body: <p>Here is html:</p>
  
  <pre><code>&lt;div class="container&gt;
      &lt;div class="header"&gt;
      &lt;/div&gt;
  
      &lt;div class="content"&gt;
      &lt;/div&gt;
  
      &lt;div class="footer"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want <code>container</code> to have the size of the <code>content</code> div. <strong>BUT</strong> I want the widths of <code>header</code> and <code>footer</code> be constrained by the size of the <code>content</code>/<code>container</code>.<br/></p>
  
  <p><code>display:inline-block</code> alone does not work because container adapts its size to the widest child.</p>
  
  <p>The width of the content is unknown so explicit width settings can not be set.</p>
  
  <p>Here is the image explaining what behavior I need.</p>
  
  <p><img src="https://i.stack.imgur.com/LQRD4.png" alt="enter image description here"></p>
  
  <p>In other words: footer and header follow the width of container.
  Size of the content defines container width.</p>