Make div always have the width of its contents

Question

I have a container div with a few elements inside, like so:

<div class="container">
  <p>one</p>
  <p>two</p>
  <p>three</p>
  <p>four</p>
  <p>five</p>
  <p>six</p>
  <p>seven</p>
  <p>eight</p>
</div>

It looks like this:

You can the that the .container div (in blue) extends to fill the whole width of the window. I would like it to always 'hug' the p's inside, to always have the minimum width necessary.

I have accomplished by setting it to display: inline-block. Now it looks like

Here comes the problem. When I re-size the window so that one of the elements gets 'pushed' down to a second row, the .container div does not shrink to fit the new size of the elements. Instead, it stretches to the edge of the window.

How would I make the div fit its contents, even when re-sizing, so that it would look like so?

I have searched and searched, but could not find an answer to this problem.

JSFiddle Here

Check out Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — erikvimz, May 23 '16 at 17:19
Duplicate of [CSS when inline-block elements line-break, parent wrapper does not fit new width](http://stackoverflow.com/q/34995740/1529630). Not possible. — Oriol, May 23 '16 at 17:35

dippas · Answer 1 · 2016-05-23T17:37:14.847

2

That's not possible, so as close as possible, you can use flexbox for that

body {
  margin: 0
}
.container {
  background: lightblue;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap
}
.container p {
  background: pink;
  font-size: 40px;
  margin:10px 0
}

<div class="container">
  <p>one</p>
  <p>two</p>
  <p>three</p>
  <p>four</p>
  <p>five</p>
  <p>six</p>
  <p>seven</p>
  <p>eight</p>
  <p>nine</p>
  <p>ten</p>
</div>

edited May 23 '16 at 17:37

answered May 23 '16 at 17:22

dippas

58,591
15
114
126

You are only justifying the items, not shrinking the container, which I don't think is possible. – Oriol May 23 '16 at 17:33
@Oriol, Ya I don't think so too, but this what I remember to get as close as possible of what OP is trying to achieve – dippas May 23 '16 at 17:36

Make div always have the width of its contents

1 Answers1