html - 一列中的其他div如何占用最宽div的宽度？

Question

我试图让列中的 div 占据最宽元素的宽度，但顶部的 div 占据了 100% 的屏幕。如何实现？请参阅下图以获取具体示例:

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

(编辑:我希望将所有这些 div 居中。这也可能吗，还是我要求太多？)

(编辑 #2:@Paulie_D 的解决方案很棒!如果您像我一样希望保持对中间列宽度的 min-content 限制，您可以按照@Paulie_D 的建议，但将 feed-list 类修改为如下所示:

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

)

Answer 1

CSS-Grid 可以做到这一点:

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