title: How can the other divs in a column take the width of the widest div?
body: <p>I'm trying to make the divs in a column take the width of the widest element, except for the div at the top that takes 100% of the screen. How can this be achieved? Kindly see the image below for a concrete example:</p>
  <p><a href="https://i.stack.imgur.com/Wd5Ve.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wd5Ve.png" alt="column of divs" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.feed-list {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px;
  }
  
  .content-card {
      width: min-content;
      background-color: #aaa;
      margin-bottom: 15px;
  }
  
  .content-card.full-width {
      width: 100%;
  }
  
  .thumbnail {
      display: flex;
      flex-direction: row;
      padding: 10px;
  }
  
  .thumbnail--image{
      width: 15rem;
      height: 8rem;
      background-color: yellow;
  }
  
  .thumbnail--title{
      margin-left: 10px;
  } </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="feed-list"&gt;
    &lt;div class="content-card full-width"&gt;
      Full row
    &lt;/div&gt;
    &lt;div class="content-card thumbnail"&gt;
      &lt;div class="thumbnail--image"&gt;
      &lt;/div&gt;
      &lt;div class="thumbnail--title"&gt;
        Lorem
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="content-card thumbnail"&gt;
      &lt;div class="thumbnail--image"&gt;
      &lt;/div&gt;
      &lt;div class="thumbnail--title"&gt;
        Lorem_ipsum
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="content-card thumbnail"&gt;
      &lt;div class="thumbnail--image"&gt;
      &lt;/div&gt;
      &lt;div class="thumbnail--title"&gt;
        Lorem_ipsum_dolor
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>(Edit: I'm looking to have center all these divs centered. Would that be possible too, or am I asking for too much?)</p>
  <p>(Edit #2: @Paulie_D's solution is great! In case you're looking, like I was, to maintain the <code>min-content</code> restriction on the width of the middle column, you can follow @Paulie_D's suggestion, but modify the feed-list class to look like this:</p>
  <pre><code>.feed-list {
    display: grid;
    grid-template-columns: 1fr min-content 1fr;
    align-items: center;
    padding: 10px;
  }
  </code></pre>
  <p>)</p>