Let flex take up the minimum space required to show max columns of items-CodePudding

I have a page that's seperated in 2 columns with the 2nd column containing a flexbox. I would like the flexbox to show the maximum number of items (depending on the size of the screen) and leave no extra whitespace on the right of it. In other words the orange space should not extend past the green blocks in the example.

How could I achieve this?

Example of what I have:

.top {
  display: flex;
  background: black;
}
.c1 {
  min-width: 50px;
  background: yellow;
}
.c2 {
  display: flex;
  background: orange;
  gap: 10px 10px;
  flex-wrap: wrap;
}
.c3 {
  background: yellow;
}
.card {
  width: 150px;
  height: 30px;
  background: green;
  border-radius: 20px;
}

<div class='top'>
  <div class='column c1'>
  </div>
  <div class='column c2'>
    <div class='card'></div>
    <div class='card'></div>
    <div class='card'></div>
    <div class='card'></div>
    <div class='card'></div>
    <div class='card'></div>
    <div class='card'></div>
    <div class='card'></div>
    <div class='card'></div>
    <div class='card'></div>
    <div class='card'></div>    
  </div>
</div>

Assuming there's space for a maximum of 3 cards the desired result would be:

CodePudding user response：

CSS grid can help here:

.top {
  display: grid;
  /* width of c1 and width of cards below */
  grid-template-columns: 40px repeat(auto-fit,150px);
  gap: 10px; /* same gap as c2 */
  background: black;
}
.c1 {
  margin-right: -10px; /* make c1 override the first gap */
  background: yellow;
}
.c2 {
  display: flex;
  grid-column: 2/-1; /* skip the first column and take all the rest */
  background: orange;
  gap: 10px;
  flex-wrap: wrap;
}
.c3 {
  background: yellow;
}
.card {
  width: 150px;
  height: 30px;
  background: green;
  border-radius: 20px;
}

<div class='top'>
  <div class='column c1'>
  </div>
  <div class='column c2'>
    <div class='card'></div>
    <div class='card'></div>
    <div class='card'></div>
    <div class='card'></div>
    <div class='card'></div>
    <div class='card'></div>
    <div class='card'></div>
    <div class='card'></div>
    <div class='card'></div>
    <div class='card'></div>
    <div class='card'></div>    
  </div>
</div>

CodePudding user response：

From what I understood this is what you want. So I changed the width of your yellow container in percentage to 60%, also changed the width of the cards to calculated values subtracting the margin or gaps around it in different types of screen using media query. Hope this helps

.top {
  display: flex;
  background: black;
}
.c1 {
  min-width: 50px;
  background: yellow;
}
.c2 {
  display: flex;
  background: orange;
  gap: 10px 10px;
  flex-wrap: wrap;
  width: 60%;
  
}
.c3 {
  background: yellow;
}
.card {
  width: calc(100% - 0px);
  height: 30px;
  background: green;
  border-radius: 20px;
}
@media only screen and (min-width: 500px){
  .card{
  width: calc(50% - 5px);
  }
}
@media only screen and (min-width: 900px){
  .card{
  width: calc(25% - 8px);
  }
}

<div class='top'>
  <div class='column c1'>
  </div>
  <div class='column c2'>
    <div class='card'></div>
    <div class='card'></div>
    <div class='card'></div>
    <div class='card'></div>
    <div class='card'></div>
    <div class='card'></div>
    <div class='card'></div>
    <div class='card'></div>
    <div class='card'></div>
    <div class='card'></div>
    <div class='card'></div>    
  </div>
</div>