Make CSS flexbox the width of its inner elements

Question

In this jsfiddle http://jsfiddle.net/54rp7x29/ I've set a flexbox to contain some fixed-width items. But the outer container element is wider than the items inside it. How can I set it to be no bigger than it needs to be? And to always be no bigger than it needs to be when the screen is resized (which will cause more or less flexbox items to be in the same row)?

This is the html:

<div id="container">
  <div id="content"></div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

This is the css:

html {
  max-width: 60%;
}

#content {
  background-color: green;
  height: 20px;
}

#container {
  background-color: yellow;
}

#container>div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#container>div>div {
  width: 80px;
  height: 100px;
  background-color: gray;
  margin: 3px;
}

@TemaniAfif If I shrink the screen width causing flex items to wrap to the next row, then there's extra width on the container. — user779159, Oct 28 '18 at 14:35
for this width you can do nothing ... check this to understand why and for some workaround : https://stackoverflow.com/questions/34995740/css-when-inline-block-elements-line-break-parent-wrapper-does-not-fit-new-width — Temani Afif, Oct 28 '18 at 14:41
@TemaniAfif Thank you could you please update my jsfiddle using that workaround and I'll mark as accepted. — user779159, Oct 28 '18 at 14:46

score 0 · Answer 1 · answered Oct 28 '18 at 14:46

Hope this is what you are looking for ? here just i have removed the html tag from css. if else please let me know

<!DOCTYPE html> 
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    #content {
        background-color: green;
        height: 20px; 
    }
    #container {
        display: inline-block;
        background-color: yellow;
    }
    #container>div {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    #container>div>div {
        width: 80px;
        height: 100px;
        background-color: gray;
        margin: 3px;
    }
    </style>
</head>
<body>
    <div id="container">
    <div id="content"></div>
    <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </div> 
    </div>
</body>

If I shrink the screen width causing flex items to wrap to the next row, then there's extra width on the container. — user779159, Oct 28 '18 at 16:26
obviously when you are shrinking the screen size, you will get the extra space in the container. take for eg if screen width is 200px and your item is 80px which you have hardcoded. while shrinking the screen width to 170px then the extra space would be = 170%80 = 10px — Nattamai Jawaharlal Manikandan, Oct 29 '18 at 07:12

score 0 · Answer 2 · answered Oct 28 '18 at 14:49

0

I thing you want to remove outside yellow space if you want please add display: table; on container.

answered Oct 28 '18 at 14:49

Tushar Kumawat

653
9
22

Make CSS flexbox the width of its inner elements

2 Answers2