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

user_977048 0
Viewed 85

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:

column of divs

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

)

css html
2 Answers

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>

user_28020400

You can do this:

.feed-list {
  display: table;
}
.content-card:not(.full-width) {
  display: table-row;
}
.content-card>span {
  display: table-cell;
}
div {
  text-align: center;
}
.content-card {
  width: 100%;
  background-color: yellow;
  margin: 3px;
}
.feed-list {
  width: 100%;
}
<div class="content-card full-width">
    Full row
  </div>
<div class="feed-list">
  <div class="content-card">
    <span>Lorem</span>
  </div>
  <div class="content-card">
    <span>Lorem_ipsum</span>
  </div>
  <div class="content-card">
    <span>Lorem_ipsum_dolor</span>
  </div>
</div>

display table works like a table, in the sense that the element with display: table; is like a <table>, table-row is like <tr>, and table-cell is like <td>.

user_155781940
Related