CODEWITHSUNDEEP
cssflexbox
mikemaccana
mikemaccana

Reputation: 123058

How can I make a flexbox parent have the width of its children?

I have a parent element, with two elements inside:

<div class="parent">
  <div class="child">
     one
  </div>
  <div class="child">
    two
  </div>
</div>

Currently, the .parent is 100% wide. I would like it only to be the width of the two children.

.parent {
  display: flex;
  background-color: aliceblue;
}

How can I make the parent to be the width of it's contents, and not wider?

See codepen for a live demo.

Upvotes: 21

Views: 24891

Answers (1)

j08691
j08691

Reputation: 207861

Change the parent's display from flex to inline-flex.

.parent {
  display: inline-flex;
  background-color: #777;
}
<div class="parent">
  <div class="child">
    one
  </div>
  <div class="child">
    two
  </div>
</div>

Upvotes: 51

Related Questions