Making container div exact size of wrapping contents

Question

I have a container div that has child divs with fixed widths and wraps. What I realised is that the container's width doesn't fit tightly to the content after it wraps, usually leaving a 'ghost' space on the right. Is there a way to force it to readjust the width according to its content?

.container {
  max-width: 12em;
  background-color: black;
}

.child {
  display: inline-block;
  width: 5em;
  background-color: red;
}

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
</div>

So in this case when the child wraps after 2 of them add up to 10em, the container instead of being 10em, it is still 12em. And if the window size forces it down to a single div wrapping, the container rather than being 5em, could be 6em, 7em, 8em, etc depending on window width.

Is there a way to get rid of the 'ghost' space and make the container fit exactly to how the child is wrapping and it's total width?

Note: I am not talking about the extra space in between each child element. I'm referring to the giant gap left in the container, which causes the container to not accurately reflect the size of its child content. I understand that I can simply count how many child can fit in 12em and change the container width to be 10em to fit 2 childs perfectly. But I want that to be flexible. Is that possible?

Answer 1

The extra space after each child element is a result of the display: inline-block property and is due to the literal whitespace between each div in your HTML. You may verify this by removing the linebreaks between child divs so that their open and close tags are back-to-back:

<div class="container">
  <div class="child">1</div><div class="child">2</div><div class="child">3</div>/*...*/
</div>

Although this will eliminate the pesky whitespace, it comes at the expense of code clarity/readability and is surely an irritating way to write HTML.

In my experience, often the best solution to this issue is to set the parent container to display: flex:

.container {
  display: flex;
  flex-wrap: wrap;
  max-width: 10em;
  background-color: black;
}

.child {
  display: inline-block;
  width: 5em;
  background-color: red;
}

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div><div class="child">5</div>
  <div class="child">6</div>
</div>

In this case you will also need to provide the flex-wrap: wrap property to inform the flex container to wrap its contents. Presumably you can now update the container's max-width property to 10em to fit exactly the width of two child elements so I've taken the liberty of this change in the code snippet.

Answer 2

Looks like you want to render a table. So you may want to use:

<table>
    <tr>
        <td>Col1</td>
        <td>Col2</td>
    </tr>
    ...
</table>

In case im wrong:

You can do this with flex or grid

Helpful link Flexbox, Grid

.container {
  max-width: 12em;
  background-color: black;
  display: flex;
}

.child {
  display: block;
  min-width: 5em;
  background-color: red;
  border: 1px dashed blue;
}


/* FLEX */
.container-flex {
  /* new row if next element doesnt fit */
  flex-wrap: wrap;
}

.container-flex .child {
  /* makes children grow evenly after wrapping */
  flex-grow: 1;   
}

/* GRID */
.container-grid {
  display: grid;
  /* 2 auto-horizontally sized colums */
  grid-template-columns: auto auto;
}

.container-grid .child {
  /* noting to do here */
}

<div style='float: left; margin-right: 10px;'>
  Flex<br>
  <small>extend elements to 6em</small><br>
  <hr>
  
  <div class="container container-flex">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
  </div>
</div>

<div style='float: left; margin-right: 10px;'>
  Grid<br/>
  <small>collapse container to 10em</small><br>
  <hr>
  
  <div class="container container-grid">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
  </div>
</div>

Answer 3

You can do it like this

    .container { max-width: 4.5em;background-color: black; }
    .child { display: inline-block; width:cover; background-color: red; }

<!DOCTYPE html>
<html>
<head>
 <title>Answer</title>
</head>
<body>
 <div class="container">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
</div>

With the width set to 'cover' it covers the complete area leaving no space.In order to fix the black background (of container which is more or less acting like border), you can manually adjust it's size.