CSS列布局如何让其余div适配最宽元素宽度且顶部div占满全屏

我想实现如下布局效果：仅顶部div占满屏幕100%宽度，列内其余div的宽度统一适配最宽元素的宽度，同时所有div需居中展示，具体效果参考下图：

当前代码 #

CSS 代码 #

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

HTML 代码 #

<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>

补充说明 #

• 额外需求：所有div都需要居中展示
• 可行解决方案：如果需要保留中间列宽度的min-content限制，可将.feed-list类的样式修改为如下代码：

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

内容的提问来源于stack exchange，提问作者habudu