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

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

First off, id's are unique. So change each `id="le"` to `class="le"`. — psdpainter, Oct 17 '19 at 18:11
@psdpainter i changed it but how does it effect the problem statement? — INFOSYS, Oct 17 '19 at 18:16
That's in addition to the problem statement. Have you tried adding the property `justify-content: space-between` to `#wrap`? — psdpainter, Oct 17 '19 at 18:32

score 1 · Answer 1 · answered Oct 17 '19 at 18:26

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>

answered Oct 17 '19 at 18:26

Henrique Erzinger

1,077
8
17

can we do away this `grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));` line in the wrap and have the width 100% also in this running example all are in same line if we have the items moved to next line – INFOSYS Oct 17 '19 at 18:30
also what does `1fr` signify , can you please explain this solution might be of help – INFOSYS Oct 17 '19 at 18:33
No, this line is what does the thing. It, and the `fr` unit (which means one fraction of the grid) are part of the [CSS Grid Layout](https://css-tricks.com/snippets/css/complete-guide-grid/). I didn't understand the rest of the question, sorry. If you click on expand snippet, run it and resize you window, you will see the behavior. – Henrique Erzinger Oct 17 '19 at 18:37

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

1 Answers1