Background color not extending when overflow is auto

Question

I want to set a background color for a div that is part of a div container that has overflow-x auto. I'm not sure what style needs to be applied to allow for div to wrap the text that is visible only when scrolling. If I set display: block; that is setting the div to whatever is visible:

 <div id="container">
        <div class="section">
            <div class="title">First</div>
            <div class="data">
                <table class="table">
                    <tr>
                        <td>
                            First of the rows and all that data
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Second of the rows and all that data
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Third of the rows and all that data
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Fourth of the rows and all that data
                        </td>
                    </tr>
                </table>
            </div>
            <div class="title">Second</div>
            <div class="data">
                <table class="table">
                    <tr>
                        <td>
                            First of the rows and all that data
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Second of the rows and all that data
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Third of the rows and all that data
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Fourth of the rows and all that data
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

(example here http://jsfiddle.net/u7ah3/1/) But if I reduce #container width (from 400 to 200) then when scrolling horizontally one can see that the div is not wrapping around text. I tried with display:inline-block but that is not working when container is wider than section blocks.

Thank you.

Answer 1

Why not just style your tds as well...?

.table, td {
    min-width:300px;
    background:#bbb;
}

Also, you should be setting a min-width on your section divs you have included, such as:

.section {
    min-width:300px;
}

JS Fiddle: http://jsfiddle.net/SinisterSystems/u7ah3/7/

I believe I understand the question right. Feel free to comment if I got something wrong and I can assist further.