How can the other divs in a column take the width of the widest div?

Issue

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:

.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;
} 

<div class="feed-list">
  <div class="content-card full-width">
    Full row
  </div>
  <div class="content-card thumbnail">
    <div class="thumbnail--image">
    </div>
    <div class="thumbnail--title">
      Lorem
    </div>
  </div>
  <div class="content-card thumbnail">
    <div class="thumbnail--image">
    </div>
    <div class="thumbnail--title">
      Lorem_ipsum
    </div>
  </div>
  <div class="content-card thumbnail">
    <div class="thumbnail--image">
    </div>
    <div class="thumbnail--title">
      Lorem_ipsum_dolor
    </div>
  </div>
</div>

(Edit: I'm looking to have center all these divs centered. Would that be possible too, or am I asking for too much?)

(Edit #2: @Paulie_D's solution is great! In case you're looking, like I was, to maintain the min-content 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:

.feed-list {
  display: grid;
  grid-template-columns: 1fr min-content 1fr;
  align-items: center;
  padding: 10px;
}

)

Solution

CSS-Grid can do that:

.feed-list {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 10px;
}

.content-card {
  background-color: #aaa;
  margin-bottom: 15px;
}

.content-card.full-width {
  grid-column: 1 /-1;
  grid-row: 1;
}

.thumbnail {
  grid-column: 2;
  display: flex;
  flex-direction: row;
  padding: 10px;
}

.thumbnail--image {
  width: 15rem;
  height: 8rem;
  background-color: yellow;
}

.thumbnail--title {
  margin-left: 10px;
}

<div class="feed-list">
  <div class="content-card full-width">
    Full row
  </div>
  <div class="content-card thumbnail">
    <div class="thumbnail--image">
    </div>
    <div class="thumbnail--title">
      Lorem
    </div>
  </div>
  <div class="content-card thumbnail">
    <div class="thumbnail--image">
    </div>
    <div class="thumbnail--title">
      Lorem_ipsum
    </div>
  </div>
  <div class="content-card thumbnail">
    <div class="thumbnail--image">
    </div>
    <div class="thumbnail--title">
      Lorem_ipsum_dolor
    </div>
  </div>
</div>

Answered By - Paulie_D