Fit parent div to its childs

Question

I've got a question for which I didn't find any easy solution.

Using only HTML and CSS,
is there a nice way to fits the parent div to "match" the total sizes of its contained elements?
Note that the box elements all have the same fixed, mandatory sizes. But this size may vary, so I'd like to not use @media queries.

Here is a commented snippet to illustrate what I mean:

#page{
  width: 500px;
}

.container {
  display: inline-block;
  border: 1px solid black;
  background: #ddd;
  height: auto;
}

.box {
  width: 200px;
  height: 30px;
  background: #fff;
  line-height: 30px;
  text-align: center;
  border: 1px solid gray;
  float: left;
}

#con1{
  width: 404px;
}

<div id="page">

<p>How is it possible to have the container sized to fit its children?</p>
<div class="container">
  <div class="box">x</div>
  <div class="box">x</div>
  <div class="box">x</div>
</div>

<br><br>

<p>Here is what I want, but without setting width in the CSS!</p>
<div class="container" id="con1">
  <div class="box">x</div>
  <div class="box">x</div>
  <div class="box">x</div>
</div>

</div>

Doing this snippet, it appears to me I've got another little question…
Why is there some space between the boxes in my snippet?

Thanks in advance for any helpful answer.

Do you want the inner divs to be in a row, or do you want two per row? — James Whiteley, May 09 '18 at 15:13
I want the `box`es to fit on 1 or more rows, accordingly to the `page` width. I've added the `page` element with a fixed width in my snippet. And I want the `container` to fit/stick to its `box`es. — Takit Isy, May 09 '18 at 15:18
Heads up your spacing between boxes is caused by using inline block and writing your HTML elements with spacing between them. The only solution is to remove all spacing: `
x
x
` (notice how `` and `
` touch) or to use something like `float: left` instead. — JonahAaron, May 09 '18 at 15:21
You're right @JonahAaron, I keep forgetting about this. I'm gonna update with `float`. It's something I dislike in html, the "spaces", "tabs", "new lines" are affecting the layout even if it's not within tags! — Takit Isy, May 09 '18 at 15:25
the answer is easy : you cannot, explained on the 2nd duplicate — Temani Afif, May 09 '18 at 15:52

score 1 · Answer 1 · answered May 09 '18 at 15:19

Use of Media Query like this:

.container {
    border: 1px solid black;
    background: #ddd;
   display: inline-block;
}

@media screen and (max-width: 631px) {
   .container {
       width: 409px;
   }
}

@media screen and (max-width: 421px) {
   .container {
       width: 202px;
   }
}

.box {
    width: 200px;
    height: 30px;
    display: inline-block;
    background: #fff;
    line-height: 30px;
    text-align: center;
    border: 1px solid gray;
}

<p>How is it possible to have the container sized to fit its children?</p>
<div class="container">
    <div class="box">x</div>
    <div class="box">x</div>
    <div class="box">x</div>
</div>

Note: Resize browser and see result!

Thanks for that answer. That's a nice way to do it. Anyway, the size of my boxes may vary. I need a way of doing exactly this, but without @media queries. :) — Takit Isy, May 09 '18 at 15:24

Fit parent div to its childs

1 Answers1