使用JavaScript添加内容时，使HTML div扩展

Question

I know there are other questions that deal with this, but they aren't working for me.

I have a <div class="column"> and inside this div there is another div called <div class="truck"> . Now there is going to be a button that will add other "truck" columns to the column div. I want the column div to expand when I add a new truck. As it stands, the extra truck is added, but to view the other truck, I have to scroll to the left. I want the column to expand with each new truck that is added. The below code doesn't have the button that I was referring to, as I have Javascript adding the next truck to each column at the moment.

Here is my HTML code:

<div id="main">
    <div id="calendar">
        <div class="column" id="day1">
            <div class = "truck" id="day1_truck1">
                <p>This is truck one</p>
            </div>
        </div>

        <div class="column" id="day2">
            <div class = "truck" id="day2_truck1">
                <p>This is truck one</p>
            </div>
        </div>

        <div class="column" id="day3">
            <div class = "truck" id="day3_truck1">
                <p>This is truck one</p>
            </div>
        </div>

        <div class="column" id="day4">
            <div class = "truck" id="day4_truck1">
                <p>This is truck one</p>
            </div>
        </div>

        <div class="column" id="day5">
            <div class = "truck" id="day5_truck1">
                <p>This is truck one</p>
            </div>
        </div>

        <div class="column" id="day6">
            <div class = "truck" id="day6_truck1">
                <p>This is truck one</p>
            </div>
        </div>

        <div class="column" id="day7">
            <div class = "truck" id="day7_truck1">
                <p>This is truck one</p>
            </div>
        </div>
    </div>
</div>

Here is the CSS:

#main
{
    border-style: solid;
    border-width: 1px;
    border-color: black; 
    width:97%;
    height:900px;
    margin:50px, auto, 10px, auto; 
    padding: 1%;
    overflow: auto; 
    white-space: nowrap;

}
#calendar
{

}
.column
{
    border-style: solid;
    border-width: 1px;
    border-color: black; 
    min-width:12%;
    max-width:100%;
    width:auto;
    height:800px;
    display: inline-block;
    margin-left:1%; 
    overflow: auto;

}
.header
{
    padding:0;
    margin:0;
    text-align: center; 
    font-style: bold; 
}

.truck
{
    width:80%;
    border-style: solid;
    border-width: 1px;
    border-color: black; 
    display:inline-block;
}

Here is what it looks like:

You can see that the extra truck div is cut off. Here, you can scroll to see it, but I want both divs to be displayed.

What am I doing wrong? I have tried to set the overflow to hidden and other suggestions from these links:

make div's height expand with its content

Make non-wrapping div expand when content overflows the page

I've also tried a couple other things from a couple other sites.

Any help would be appreciated. I know this can be done with Javascript, but I'm pretty sure that it can be done without it. If Javascript is my only option, that's fine, I just figured I'd try to avoid it as doing it in HTML/CSS would be simpler.

Answer 1

So you are trying to make the new truck column go beside the other truck in the same column or underneath it?

If you want the div to go beside ( DEMO ) the previous one change your .truck CSS code to this:

        .truck
    {
        width:auto;
        border-style: solid;
        border-width: 1px;
        border-color: black; 
        display:inline-block;
    }

To make it post underneath, change the .truck CSS to this:

    .truck
    {
        width:auto;
        border-style: solid;
        border-width: 1px;
        border-color: black; 
        display:block;
    }