CODEWITHSUNDEEP
htmlcssflexbox
Joel Hoelting
Joel Hoelting

Reputation: 1992

Why is flex div 100% width of parent div?

I am confused as to why a flex div takes up 100% width of its parent element. Take the following snippet:

#wrapper {
  width: 100%;
  height: 100px;
  background: green;
}

#flex {
  color: white;
  display: flex;
  flex-direction: row;
  background: blue;
}
<div id="wrapper">
   <div id="flex">
     <div>Item</div>
     <div>Item</div>
     <div>Item</div>
     <div>Item</div>
   </div>
</div>

Why is the flex div expanding to 100% width of the parent? Is there a way to make the flex div only as wide as the contents within it?

Any help appreciated, Thanks

Upvotes: 3

Views: 3425

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371231

Your #flex div has display: flex applied. That's a block-level command (such as display: block) which, by design, occupies the full width of the parent. Use display: inline-flex instead.

Upvotes: 5

Related Questions