How to make an horizontal scroll section with not fixed item width

Question

I've created this example:

.container {
  height: 50px;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 6px;
  padding-right: 6px;
  background: lightgray;
}

.card {
  min-width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid white;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 3px;
  margin-right: 3px;
}

.card-final {
  padding-right: 6px;
}

<div class="container">
  <div class="card">Cat</div>
  <div class="card">Tropical fish</div>
  <div class="card">Southern Titiwangsa bent-toed gecko</div>
  <div class="card">Woodpecker</div>
  <div class="card">Crow</div>
  <div class="card">Peacock</div>
  <div class="card">Pig</div>
  <div class="card">Dog</div>
  <div class="card-final"></div>
</div>

What I would like to have is that the .cards have no fixed width the text inside each card should be on a single line and each card shouldn't have more horizontal space that the necessary. So the Pig card will have smaller width than then the Tropical fish card or the Southern Titiwangsa bent-toed gecko card.

Temani Afif · Accepted Answer · 2021-03-29 19:14:41Z

Remove the min-width and use flex-shrink:0;

.container {
  height: 50px;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 6px;
  padding-right: 6px;
  background: lightgray;
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid white;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 3px;
  margin-right: 3px;
  flex-shrink:0;
}

.card-final {
  padding-right: 6px;
}

<div class="container">
  <div class="card">Cat</div>
  <div class="card">Tropical fish</div>
  <div class="card">Southern Titiwangsa bent-toed gecko</div>
  <div class="card">Woodpecker</div>
  <div class="card">Crow</div>
  <div class="card">Peacock</div>
  <div class="card">Pig</div>
  <div class="card">Dog</div>
  <div class="card-final"></div>
  <div class="card">Crow</div>
  <div class="card">Peacock</div>
  <div class="card">Pig</div>
  <div class="card">Dog</div>
  <div class="card">Crow</div>
  <div class="card">Peacock</div>
  <div class="card">Pig</div>
  <div class="card">Dog</div>
</div>

Collectives™ on Stack Overflow

How to make an horizontal scroll section with not fixed item width

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related