Jika bekas itu fleksibel dan item2 mempunyai limpahan, bekas akan diberikan kepada saiz yang dikehendaki dan bar skrol limpahan akan kelihatan.
.Flex_container {
width: 300px;
height: 100px;
display: flex;
flex-direction: column;
}
.item1 {
color: white;
background-color: black;
}
.item2 {
color: white;
background-color: brown;
overflow: auto;
}
<div class="Flex_container">
<div class="item1">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy ei </p>
</div>
<div class="item2">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accug elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et at.</p>
</div>
</div>
Tapi bila tak apply flexbox, limpahan tu macam tak berkesan. Bekas nampaknya lebih mudah disesuaikan dengan kandungan. Saya ingin tahu kenapa. Saya sedang bersiap sedia untuk mempelajari CSS. Dan saya tidak dapat mengeluarkan soalan ini dari kepala saya.
.container {
width: 300px;
height: 100px;
}
.item1 {
color: white;
background-color: black;
}
.item2 {
color: white;
background-color: brown;
overflow: auto;
}
<div class="container">
<div class="item1">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy ei </p>
</div>
<div class="item2">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accug elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et at.</p>
</div>
</div> 
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Bekas tidak sesuai dengan kandungan. Ia mengekalkan ketinggian yang anda berikan.
Tetapi ketinggian elemen kanak-kanak tidak dihadkan, jadi ia membesar agar sesuai dengan kandungan, dan memandangkan elemen induk tidak mempunyai limpahan-y yang ditetapkan untuk disembunyikan, ia boleh dilihat.
Berikut ialah contoh di mana dua elemen kanak-kanak mempunyai latar belakang sedikit lutsinar supaya anda boleh melihat latar belakang elemen induk dan dalam kes ini ia berakhir sedikit di bawah elemen anak kedua.
.container { width: 300px; height: 100px; background: magenta; } .item1 { color: white; background-color: rgba(0, 0, 0, 0.4); } .item2 { color: white; background-color: rgba(0, 0, 255, 0.4); overflow: auto; }<div class="container"> <div class="item1"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy ei </p> </div> <div class="item2"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accug elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et at.</p> </div> </div>