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

user_7805613 0
Viewed 1663

#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

enter image description here

flexbox css html
1 Answers

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>

user_53707270
Related