How do I set this div to be the minimum possible width to display its floating contents?

Question

Problem

I have \"boxes\" that float left so that I can display them in a line until they need to wrap. This works well, but my coloured background doesn\'t shrink

Answer 1

your container will wrap if there's a clear 'break to next line'.

Here is a pen to see different test, just set via CSS how many per line.

3.2.1 is that what you want ?

http://codepen.io/gcyrillus/pen/gHwjz

.container {
    background: #fcc;
    margin: 0 auto;
    max-width:300px;
    }
.container.table {
  display:table;
}
.boxes {
    background: #cfc;
    display:inline-block ;/* or float */
    vertical-align:top;
}
.box {
    border: 1px dashed blue ;
    width: 70px;
    height: 50px;
    float:left;
    margin: 2px;
}

/* ====== test */
.container {clear:left;margin:1em auto;}
.container.inline-block {
  display:inline-block;
}
.container.table {
  display:table;
}
.container.float {
 float:right
}
section {
  width:450px; 
  margin:auto;
  padding:0.5em 1.5em;
  background:#ffffd;
  overflow:hidden;
}
.container:before { /* see classes */
  content:attr(class);
  display:block;
  position:absolute;
  margin-top:-1.2em;
}

/* wrap to next-line */
.float .box:nth-child(1n) {
clear:left;
}
.inline-block .box:nth-child(4n) {
clear:left;
}
.table .box:nth-child(odd) {
clear:left;
}