javascript - Javascript でコンテンツが追加されたときに HTML div を展開する

Question

これに対処する他の質問があることは知っていますが、それらは私にとってはうまくいきません。

私には があり<div class="column">、この中に と呼ばれるdiv別のものがあります。これで、他の「トラック」列をdiv に追加するボタンが表示されます。新しいトラックを追加するときに列 div を展開したい。このままでは余分なトラックが追加されますが、他のトラックを表示するには、左にスクロールする必要があります。新しいトラックが追加されるたびに列を拡張したい。以下のコードには、私が参照していたボタンがありません。現時点では、Javascript が次のトラックを各列に追加しているためです。div<div class="truck">column

ここに私のHTMLコードがあります:

<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>

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;
}

これは次のようになります。

余分なトラック div が切り取られていることがわかります。ここでは、スクロールして見ることができますが、両方の div が表示されるようにします。

私は何を間違っていますか？hiddenこれらのリンクからのオーバーフローとその他の提案を設定しようとしました:

div の高さをそのコンテンツで拡張する

コンテンツがページからはみ出たときに非ラップ div を展開する

また、他のいくつかのサイトからいくつかのことを試しました。

どんな助けでも大歓迎です。これは Javascript で実行できることはわかっていますが、それがなくても実行できると確信しています。Javascript が私の唯一の選択肢である場合は、それで問題ありません。HTML/CSS で行う方が簡単なので、避けようと思いました。