0

I am trying to have a flexbox, and some elements inside. I try to set the width of the elements inside the width box, for example to 500px for each one, but they are limited in width and they don't take the required width.

Below is my code: 

#container{
  display: inline-flex;
  border: 5px solid ;
  width: 20%;
  flex-wrap: 
}
.first{
  background-color: red;
  width: 300px;
}
.second{
  background-color: green;
  width: 400px;
}
.third{
  background-color: yellow;
  width: 400px
}
<div id="container">
  <div class="first">
    <span>first item</span>
    <h1> 01 </h1>
  </div>
  
  <div class="second">
    <span>second item</span>
    <h1> 02 </h1>
  </div>
  
  <div class="third">
    <span>third item</span>
    <h1> 03 </h1>
  </div>
  
  <div class="first">
    <span>first item</span>
    <h1> 01 </h1>
  </div>
  
  <div class="second">
    <span>second item</span>
    <h1> 02 </h1>
  </div>
 
  <div class="third">
    <span>third item</span>
    <h1> 03 </h1>
  </div>
  
  <div class="first">
    <span>first item</span>
    <h1> 01 </h1>
  </div>
  

  
  <div class="second">
    <span>second item</span>
    <h1> 02 </h1>
  </div>
  
  <div class="third">
    <span>third item</span>
    <h1> 03 </h1>
  </div>
</div>

As can be seen, the elements take around 400px for the width as specified in css, but in the html generated, they don't. Is there something wrong I am doing?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Jacky
  • 393
  • 1
  • 3
  • 13
  • Please check this link:-http://www.w3schools.com/css/css3_flexbox.asp – Razia sultana Nov 26 '16 at 05:46
  • An initial setting of a flex container is `flex-shrink: 1`. This means that flex items are able to shrink in order to fit inside the container. If you want the width of items to be respected, then disable `flex-shrink`. Add this to your code: `#container > div { flex-shrink: 0; }`. More details [**here**](http://stackoverflow.com/q/34352140/3597276). – Michael Benjamin Nov 26 '16 at 13:23

2 Answers2

1

There is a typo in #container{flex-wrap:wrap;}

here it works as row wise

#container{
  display: inline-flex;
  border: 5px solid ;
  width: 20%;
  flex-wrap:wrap;
}
.first{
  background-color: red;
  width: 300px;
}
.second{
  background-color: green;
  width: 400px;
}
.third{
  background-color: yellow;
  width: 400px
}
<div id="container">
  <div class="first">
    <span>first item</span>
    <h1> 01 </h1>
  </div>
  
  <div class="second">
    <span>second item</span>
    <h1> 02 </h1>
  </div>
  
  <div class="third">
    <span>third item</span>
    <h1> 03 </h1>
  </div>
  
  <div class="first">
    <span>first item</span>
    <h1> 01 </h1>
  </div>
  
  <div class="second">
    <span>second item</span>
    <h1> 02 </h1>
  </div>
 
  <div class="third">
    <span>third item</span>
    <h1> 03 </h1>
  </div>
  
  <div class="first">
    <span>first item</span>
    <h1> 01 </h1>
  </div>
  

  
  <div class="second">
    <span>second item</span>
    <h1> 02 </h1>
  </div>
  
  <div class="third">
    <span>third item</span>
    <h1> 03 </h1>
  </div>
</div>
jafarbtech
  • 6,842
  • 1
  • 36
  • 55
0

Just change display:inline-flex to flex and by default flex-direction is row and use flex-wrap:wrap ,by this every element/div takes the specified width.

Also,you have specified parent container's width as 20% ,so every child/div element within it is taking parent element's width as base so that's why it is not respecting their individual widths ,i have taken off parent width ,now you can see the difference

Hope it helps

check the snippet

#container{
  display: flex;
  border: 5px solid ;

  flex-wrap: wrap;
}
.first{
  background-color: red;
  width: 300px;
}
.second{
  background-color: green;
  width: 400px;
}
.third{
  background-color: yellow;
  width: 400px
}
<div id="container">
  <div class="first">
    <span>first item</span>
    <h1> 01 </h1>
  </div>
  
  <div class="second">
    <span>second item</span>
    <h1> 02 </h1>
  </div>
  
  <div class="third">
    <span>third item</span>
    <h1> 03 </h1>
  </div>
  
  <div class="first">
    <span>first item</span>
    <h1> 01 </h1>
  </div>
  
  <div class="second">
    <span>second item</span>
    <h1> 02 </h1>
  </div>
 
  <div class="third">
    <span>third item</span>
    <h1> 03 </h1>
  </div>
  
  <div class="first">
    <span>first item</span>
    <h1> 01 </h1>
  </div>
  

  
  <div class="second">
    <span>second item</span>
    <h1> 02 </h1>
  </div>
  
  <div class="third">
    <span>third item</span>
    <h1> 03 </h1>
  </div>
</div>
Geeky
  • 7,420
  • 2
  • 24
  • 50