How can I make a div not larger than its contents?

Question

I have a layout similar to:

I would like for the div to only exp

Answer 1

If you have containers breaking lines, after hours looking for a good CSS solution and finding none, I now use jQuery instead:

$('button').click(function(){

  $('nav ul').each(function(){
    
    $parent = $(this).parent();
    
    $parent.width( $(this).width() );
    
  });
});

nav {
  display: inline-block;
  text-align: left; /* doesn't do anything, unlike some might guess */
}
ul {
  display: inline;
}

/* needed style */
ul {
  padding: 0;
}
body {
  width: 420px;
}

/* just style */
body {
  background: #ffffd;
  margin: 1em auto;
}
button {
  display: block;
}
nav {
  background: #bbb;
  margin: 1rem auto;
  padding: 0.5rem;
}
li {
  display: inline-block;
  width: 40px;
  height: 20px;
  border: solid thin #777;
  margin: 4px;
  background: #999;
  text-align: center;
}

fix


  

    
3
    
.
    
1
    
4
  



  

    
3
    
.
    
1
    
4
    
1
    
5
    
9
    
2
    
6
    
5
    
3
    
5