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

My CSS3 flexbox solution in two flavors: The one on top behaves like a span and the one at the bottom behaves like a div, taking all the width with the help of a wrapper. Their classes are "top", "bottom" and "bottomwrapper" respectively.

body {
    font-family: sans-serif;
}
.top {
    display: -webkit-inline-flex;
    display: inline-flex;
}
.top, .bottom {
    background-color: #3F3;
    border: 2px solid #FA6;
}
/* bottomwrapper will take the rest of the width */
.bottomwrapper {
    display: -webkit-flex;
    display: flex;
}
table {
    border-collapse: collapse;
}
table, th, td {
    width: 280px;
    border: 1px solid #666;
}
th {
    background-color: #282;
    color: #FFF;
}
td {
    color: #444;
}
th, td {
    padding: 0 4px 0 4px;
}

Is this

	

        

            
OS
            
Version
 
        
        

            
OpenBSD
            
5.7
 
        
        

            
Windows
            
Please upgrade to 10!
 
        
    

what you are looking for?


Or may be...

    

    	

            

                
OS
                
Version
 
            
            

                
OpenBSD
                
5.7
 
            
            

                
Windows
                
Please upgrade to 10!
 
            
        
    

this is what you are looking for.