Flex Items Leaving Empty Space on right side of Container while Shrinking [duplicate]

Question

#container{
  display: flex;
  width:100%;
  height:100%;
}

#wrap {
  outline: 1px solid red;
  display: flex;
  width: 72%;
  height: 100%;
  overflow-x: auto;
  align-content: flex-start;
  flex-wrap: wrap;
  padding: 24px 0px;
  box-sizing: border-box;
}

#wrap2 {
  outline: 1px solid green;
  display: flex;
  margin-left:10px;
  width:28%;
  min-height:100%;
}

.le{
  display: inline-flex;
  width: 28%;
  background-color:lightblue;
  max-width: 80px;
  min-width: 60px;
  height: 30px;
  margin: 15px;
  flex: 1 0 auto;
  border-radius: 8px;
  cursor: pointer;
  }

<div id ="container">
<div id="wrap">
  <div class="le"></div>
  <div class="le"></div>
  <div class="le"></div>
  <div class="le"></div>
  <div class="le"></div>
</div>
<div id="wrap2">
</div>
</div>

When we Shrink the Screen we see there is a Empty Space in the wrap div on the right side is there a way to prevent that when we shrink we increase the item size i:e the le item.

I am trying to make sure the empty space doesn't look off to the user as the user shrinks the browser. what are the possible ways to fix this

Answer 1

That's a prime example of something that CSS Grid will do better than flexbox. Something like this:

#container{
  display: flex;
  width:100%;
  height:100%;
}

#wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  outline: 1px solid red;
  width: 72%;
  height: 100%;
  overflow-x: auto;
  padding: 24px 0px;
  box-sizing: border-box;
}

#wrap2 {
  outline: 1px solid green;
  display: flex;
  margin-left: 10px;
  width: 28%;
  min-height:100%;
}

.le {
  display: inline-flex;
  background-color: lightblue;
  height: 30px;
  margin: 15px;
  border-radius: 8px;
  cursor: pointer;
}

<div id ="container">
  
  <div id="wrap">
    <div class="le"></div>
    <div class="le"></div>
    <div class="le"></div>
    <div class="le"></div>
    <div class="le"></div>
  </div>
  
  <div id="wrap2"></div>
</div>