css - How can I make a div stretch to include a contained table?

Question

I have a table that is sometimes wider than the div it is inside – this causes my table to go outside the div border.

How can I make the div stretch so the div border always goes around the table?

This fiddle shows the problem if you shrink the result pane.

div#wrapper{
    margin: 2em;
    padding: 1em;
    border: 1px solid black;
    width: auto;
}

<div id="wrapper">
    <table border="1">
        <tr>
            <td>stuff</td>
            <td>stuff</td>
            <td>stuff</td>
            <td>stuff</td>
            <td>stuff</td>
            <td>stuff</td>
            <td>stuff</td>
            <td>stuff</td>
            <td>more stuff</td>
            <td>more stuff</td>
            <td>more stuff</td>
            <td>more stuff</td>
            <td>more stuff</td>
        </tr>
    </table>

Answer 1

更改to的display值是一种方法：div#wrapperinline-block

div#wrapper {
    margin: 2em;
    padding: 1em;
    border: 1px solid black;
    display: inline-block;
}

修复了 jsFiddle