title: Prevent a specific child div from expanding the parent div
body: <p>I'm currently developping a website and encountered a problem with CSS.</p>
  
  <p>I have a parent <code>div</code> containing 2 or more children: one containing the name of a user that sits on top of the other children, and just below 1 or more side by side <code>div</code>s which display items owned by the user.</p>
  
  <p>At the moment it works fine, but if the user's name (top <code>div</code>) is larger than the total width of the <code>div</code>s below, it will expand the parent <code>div</code>.</p>
  
  <p>I'd like to only allow the bottom <code>div</code>s to expand the parent <code>div</code> and make the title <code>div</code> use the full parent <code>div</code>'s width without being able to make it larger.</p>
  
  <p>I created a fiddle about it: <a href="http://jsfiddle.net/mLxjL/2/" rel="noreferrer">http://jsfiddle.net/mLxjL/2/</a></p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="matches"&gt;
      &lt;div class="match-container"&gt;
          &lt;div class="user-match-container"&gt;
              &lt;div class="match-owner user"&gt;You&lt;/div&gt;
              &lt;div class="match"&gt;
                  &lt;div class="thumbnail"&gt;
                      &lt;img class="image-container" src="img-path"&gt;
                      &lt;div class="thumbnail-count"&gt;2&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item-name"&gt;The Zeppelin of Consequence (Trading Card)&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt; &lt;span class="arrow"&gt;→&lt;/span&gt; 
          &lt;div class="user-match-container"&gt;
              &lt;div class="match-owner friend"&gt;PfaU- [W] King Arthurs Gold&lt;/div&gt;
              &lt;div style="clear:both;"&gt;&lt;/div&gt;
              &lt;div class="match"&gt;
                  &lt;div class="thumbnail"&gt;
                      &lt;img class="image-container" src="img-path"&gt;
                      &lt;div class="thumbnail-count"&gt;2&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item-name"&gt;The Lost Hobo King&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.match-container:before, .match-container:after {
      content:"";
      display:table;
  }
  .match-container:after {
      clear:both;
  }
  .match-container {
      border:1px solid #666;
      background-image:url('img/stripes.png');
      border-radius:5px;
      padding:10px;
      margin:10px;
      float:left;
  }
  .match {
      width:112px;
      float:left;
      margin: 0 2px;
  }
  .match .image-container {
      width:112px;
      height:130px;
      display:block;
  }
  .match .item-name {
      line-height:12px;
      font-size:10px;
      margin-top:4px;
      text-align:center;
      height:24px;
      overflow:hidden;
      clear:both;
  }
  .match-container .arrow {
      float:left;
      position:relative;
      top:70px;
      margin:5px;
  }
  .match-owner {
      line-height:14px;
      font-size:12px;
      margin-top:4px;
      text-align:center;
      height:14px;
      overflow:hidden;
      margin-bottom:4px;
      border:1px solid #666;
      background-image:url('img/stripes.png');
      border-radius:5px;
  }
  .match-owner.user {
      background-color:green;
  }
  .match-owner.friend {
      background-color:red;
  }
  .thumbnail-count {
      position:relative;
      top:-24px;
      margin-bottom:-24px;
      font-size:16px;
      font-weight:bold;
      border-top:1px solid white;
      border-right:1px solid white;
      border-top-right-radius: 7px;
      font-size:18px;
      background: rgb(160, 160, 160) transparent;
      background: rgba(160, 160, 160, 0.70);
      padding: 0 4px;
      float:left;
  }
  .user-match-container {
      float:left;
  }
  </code></pre>
  
  <p>Is it possible to do this without using JavaScript?</p>