以下のスキームでdivを整列できない/なぜ最後のコンテナが見えないのですか？

Question

私は7つのdivを別の親コンテナに整列したいと思います。すべてのものは、最初のものと最後のものを除いて、同じ高さ（親コンテナと同じ）と幅を持つ必要があります。

<div id="weatherBar"> 
    <div class="arrow"></div> 
    <div class="table-wrapper"> 
    <div>1</div> 
    </div> 
    <div class="table-wrapper"> 
    <div>2</div> 
    </div> 
    <div class="table-wrapper"> 
    <div>3</div> 
    </div> 
    <div class="table-wrapper"> 
    <div>4</div> 
    </div> 
    <div class="table-wrapper"> 
    <div>5</div> 
    </div> 
    <div class="arrow"></div> 
</div> 

はCSS

div#weatherBar { 
    position: relative; 
    width: 60vw; 
    max-width: 60vw; 
    height: 10vh; 
    left: 50%; 
    transform: translateX(-50%); 
    background-color: rgb(255, 255, 255); 
    overflow: hidden; 
    margin-top: 10vh; 
} 

div#weatherBar div.table-wrapper { 
    min-height: 10vh; 
    max-height: 10vh; 
    min-width: 10vw; 
    max-width: 10vw; 
    border: solid 0.5px blue; 
    float: left; 
    overflow: hidden; 
} 

div#weatherBar div.arrow { 
    min-height: 10vh; 
    max-height: 10vh; 
    min-width: 5vw; 
    max-width: 5vw; 
    float: left; 
    overflow: hidden; 
    background-color: red; 
} 

しかし、何が起こることは、最後のdivが表示されないということですが（私は写真を添付

HTML：

は、私はそのような何かを試してみました）なぜ私は考えていない。私を助けてくれますか？

ありがとうございます！ box-sizingはデフォルトでcontent-boxあるよう

Answer 1

:-)要素のborderは、要素のwidthにデフォルトで含まれていません。

border-boxに変更し、それを境にを使用してwidthにを含まれるように：以下

* { 
    box-sizing: border-box; 
} 

参照のデモ：聞いたことがない

* { 
 
    box-sizing: border-box; 
 
} 
 
div#weatherBar { 
 
    position: relative; 
 
    width: 60vw; 
 
    max-width: 60vw; 
 
    height: 10vh; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    background-color: rgb(255, 255, 255); 
 
    overflow: hidden; 
 
    margin-top: 10vh; 
 
} 
 

 
div#weatherBar div.table-wrapper { 
 
    min-height: 10vh; 
 
    max-height: 10vh; 
 
    min-width: 10vw; 
 
    max-width: 10vw; 
 
    border: solid 0.5px blue; 
 
    float: left; 
 
    overflow: hidden; 
 
} 
 

 
div#weatherBar div.arrow { 
 
    min-height: 10vh; 
 
    max-height: 10vh; 
 
    min-width: 5vw; 
 
    max-width: 5vw; 
 
    float: left; 
 
    overflow: hidden; 
 
    background-color: red; 
 
}

<div id="weatherBar"> 
 
    <div class="arrow"></div> 
 
    <div class="table-wrapper"> 
 
    <div>1</div> 
 
    </div> 
 
    <div class="table-wrapper"> 
 
    <div>2</div> 
 
    </div> 
 
    <div class="table-wrapper"> 
 
    <div>3</div> 
 
    </div> 
 
    <div class="table-wrapper"> 
 
    <div>4</div> 
 
    </div> 
 
    <div class="table-wrapper"> 
 
    <div>5</div> 
 
    </div> 
 
    <div class="arrow"></div> 
 
</div>