伸缩物品，收缩时在容器的右侧留有空白空间

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>

缩小屏幕时，我们会在右侧的包装div中看到一个空白区域，这是一种防止在缩小屏幕时增加项目大小（即le项）的方法。

我试图确保用户收缩浏览器时，空白空间不会被用户看到。有什么可能的方法来解决这个问题

Answer 1

这是CSS Grid比flexbox更好的例子。像这样：

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