How do I fix the width of Flex container to be equal to the width of flex items?

Question

.container {
  display: flex;
  border: 5px solid blue;
  height: 200px;
  flex-wrap:wrap;
  width: fit-content;
  
  .div-1 {
    border: 5px solid red;
    width: 230px;
  }
  .div-2 {
    border: 5px solid green;
    width: 200px;
  }

  .div-3 {
    border: 5px solid green;
    width: 200px;
  }
  .div-4 {
    border: 5px solid green;
    width: 200px;
  }
  .div-5 {
    border: 5px solid green;
    width: 200px;
  }
   .div-6 {
    border: 5px solid green;
    width: 200px;
  }
   .div-7 {
    border: 5px solid green;
    width: 400px;
  }
   .div-8 {
    border: 5px solid green;
    width: 400px;
  }
}

<div class="container">
  <div class="div-1">I'm 230 px wide</div>
  <div class="div-2">I'm take up what is left in the view port!</div>
  
  <div class="div-3"></div>
  <div class="div-4"></div>
  <div class="div-5"></div>
  <div class="div-6"></div>
  <div class="div-7"></div>
  <div class="div-8"></div>
</div>

I want to set the width of flex-container to be equal to the width of flex-items, so that there is no remaining empty space at the end..

Attached Code for reference. Here I would like to fix width of the container to be equal to width of first 6 divs combined.

.container {
  display: inline-flex;
  border: 5px solid blue;
  height: 200px;
  width: fit-content;
  flex-wrap: wrap;
  
  .div-1 {
    border: 5px solid red;
    width: 230px;
  }
  .div-2 {
    border: 5px solid green;
    width: 200px;
  }

  .div-3 {
    border: 5px solid green;
    width: 200px;
  }
  .div-4 {
    border: 5px solid green;
    width: 200px;
  }
  .div-5 {
    border: 5px solid green;
    width: 200px;
  }
  .div-6 {
    border: 5px solid green;
    width: 200px;
  }
  .div-7 {
    border: 5px solid green;
    width: 400px;
  }
  .div-8 {
    border: 5px solid green;
    width: 300px;
  }
  
}

.next-line {
  height: 100px;
  border: 5px solid orange;
}

<div class="container">
  <div class="div-1">I'm 230 px wide</div>
  <div class="div-2">I'm take up what is left in the view port!</div>
  <div class="div-3"></div>
  <div class="div-4"></div>
  <div class="div-5"></div>
    <div class="div-6"></div>
    <div class="div-7"></div>
    <div class="div-8"></div>
</div>
<div class="next-line">
  I'm the next div element!
</div>

https://codepen.io/prashantkumarsahu/pen/WNZRXdB

Please add code in the question. Don't add image/ code links for code reference https://stackoverflow.com/help/how-to-ask — vatz88, Dec 14 '21 at 13:12
Check out this answer https://stackoverflow.com/questions/29503227/how-to-make-flexbox-items-the-same-size — Susmita Sil, Dec 14 '21 at 13:51

score 0 · Answer 1 · answered Dec 14 '21 at 14:07

When you use display: flex; in the container's style, and the container hasn't owned width, the container's width will be fixed on children's width.

If your container has a fixed width, and you want children to grow and to occupy the whole container width, you should use the flex-grow:1; property in your children's styles.

If you want to read more about flex-grow I suggest you developer.mozilla.org and css-tricks.com

Here is the Codepen link.

.container {
  display: flex;
  border: 5px solid blue;
  height: 200px;
  flex-wrap:wrap;
 }
  .div-1 {
    border: 5px solid red;
    width: 230px;
    flex-grow:1;
  }
  .div-2 {
    border: 5px solid green;
    width: 200px;
    flex-grow:1;
  }

  .div-3 {
    border: 5px solid green;
    width: 200px;
    flex-grow:1;
  }
  .div-4 {
    border: 5px solid green;
    width: 200px;
    flex-grow:1;
  }
  .div-5 {
    border: 5px solid green;
    width: 200px;
    flex-grow:1;
  }
   .div-6 {
    border: 5px solid green;
    width: 200px;
     flex-grow:1;
  }
   .div-7 {
    border: 5px solid green;
    width: 400px;
  }
   .div-8 {
    border: 5px solid green;
    width: 400px;
  }

.next-line {
  height: 100px;
  border: 5px solid orange;
}

<div class="container">
  <div class="div-1">I'm 230 px wide</div>
  <div class="div-2">I'm take up what is left in the view port!</div>
  <div class="div-3"></div>
  <div class="div-4"></div>
  <div class="div-5"></div>
    <div class="div-6"></div>
    <div class="div-7"></div>
    <div class="div-8"></div>
</div>

score -1 · Answer 2 · answered Dec 14 '21 at 13:53

-1

Modify .container css

.container {
  display: flex;
  /* width: fit-content; */
  ...

So that div-1 stretches the width of the container.

answered Dec 14 '21 at 13:53

Junky

958
7
17

How do I fix the width of Flex container to be equal to the width of flex items?

2 Answers2