<div>標簽是HTML中的一個常見元素，在網頁中用于創建一個容器，用于包含和組織其他HTML元素。當在一個<div>容器中包含的內容超過了容器的高度或寬度時，瀏覽器將自動顯示滾動條。使用CSS樣式可以自定義滾動條的外觀和行為，包括滾動條的寬度。
在CSS中，可以使用overflow屬性來定義如何處理容器內超出其尺寸的內容。默認情況下，overflow的值為visible，表示不剪裁內容且顯示溢出內容。如果將overflow設置為scroll，則會為容器創建滾動條，無論內容是否溢出。而overflow的值為hidden，會將超出尺寸的內容完全隱藏。當overflow的值設置為auto時，當內容溢出容器時才會顯示滾動條。
下面通過幾個代碼案例來詳細解釋div滾動條寬度的相關設置和效果。
案例一：

<div style="width: 200px; height: 200px; overflow: scroll;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere vestibulum sem. Nulla a risus id erat maximus ultricies.</p>
</div>

在這個案例中，我們創建了一個寬度為200px、高度為200px的<div>容器，并設置其overflow屬性為scroll。在這個容器中，我們包含了一段文本。由于文本超過了容器的尺寸，瀏覽器會自動為容器創建一個縱向滾動條，讓用戶可以滾動查看超出尺寸的內容。
案例二：

<div style="width: 200px; height: 200px; overflow: auto;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere vestibulum sem. Nulla a risus id erat maximus ultricies. Quisque iaculis diam ac rhoncus fringilla.</p>
</div>

這個案例和前面的案例相似，唯一的區別在于overflow的值為auto。當內容沒有超出容器的尺寸時，不會顯示滾動條；而當內容超出容器的尺寸時，會顯示滾動條。
案例三：

<style>
.custom-scrollbar {
width: 200px;
height: 200px;
overflow: scroll;
scrollbar-width: thin;
scrollbar-color: red yellow;
}
</style>
<div class="custom-scrollbar">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere vestibulum sem. Nulla a risus id erat maximus ultricies. Quisque iaculis diam ac rhoncus fringilla.</p>
</div>

在這個案例中，我們使用了自定義樣式來設置滾動條的寬度。通過設置scrollbar-width為thin，我們將滾動條的寬度設置為較窄的值。此外，通過scrollbar-color屬性可以自定義滾動條的顏色，這里我們將滾動條的顏色設置為紅色和黃色。
綜上所述，通過CSS樣式，我們可以自定義<div>容器的滾動條寬度。通過設置overflow屬性為scroll或auto，我們可以控制容器是否顯示滾動條。此外，通過使用scrollbar-width和scrollbar-color屬性，我們還可以自定義滾動條的寬度和顏色，使其更符合網頁的整體設計。