0

I'm trying to make a flexbox container for some items. There is one 100% width item inside as a headline.

The container is bigger ( width ) than needed.. why ?

Here is the code: 

.flex_container {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid blue;
}

.flex_head {
  width: 100%;
  padding: 10px;
  background-color: blue;
  font-size: 14px;
}

.flex_item {
  width: 175px;
  margin: 9px;
  border: 10px solid red;
  background-color: red;
}
<div class="flex_container">
  <div class="flex_head">Flex Head</div>
  <div class="flex_item">Item</div>
  <div class="flex_item">Item</div>
  <div class="flex_item">Item</div>
  <div class="flex_item">Item</div>
<div>

Demo on jsfiddle

Madosa
  • 15
  • 1
  • 3
  • 6
  • Because this is how the box model work. The parent container does not know when items wrap, so it will try to fit all the red in 1 row, hence fill its parent (the body) first. If you take out 2 red, or have a wide screen, you'll see it behave – Asons Nov 23 '17 at 06:54
  • @LGSon any idea how i could make the container always the width of the content, without any space left ? – Madosa Nov 23 '17 at 07:10
  • If to be dynamic, use media query's, or a script to calculate it based on screen width – Asons Nov 23 '17 at 07:23
  • Here is a sample with media query's: https://jsfiddle.net/y2b9rz98/1/ – Asons Nov 23 '17 at 07:33
  • @LGSon well the amout of items is variable too .. so i cannot calculate the width. – Madosa Nov 23 '17 at 07:54
  • As long as the items width is known for all items, media query work, as you can see in my fiddle sample [https://jsfiddle.net/y2b9rz98/2/](https://jsfiddle.net/y2b9rz98/2/), and if not, you need a script ... and in my fiddle you might need to add a few more query's so it work on wider screens – Asons Nov 23 '17 at 08:02
  • @LGSon thanks a lot. I just found another solution. I add the flex: auto; value to the item. So they will expant to the aviable space of the container. Not the solution i wanted but its pretty easy – Madosa Nov 23 '17 at 08:12
  • Yes, that is yet another way :) – Asons Nov 23 '17 at 08:17

0 Answers0