實例
<div style="width: 200px; position:relative; top: 200px; background: silver;">
<div class="slidesWrap" style="height:200px">
<div style="height:300px; width:100%; background: pink;">content</div>
<div style="height:30px; width:100%; background: green;">content</div>
</div>
</div>
.slidesWrap {
display: flex;
align-items: center;
overflow: auto;
}
.slide {
overflow: auto;
flex: 1;
max-height:100%;
}
結果:
左側區域的content不見了。而且滾動也不會出現。
這是因爲overflow:scroll 只會對下方或右側超出的部分滾動 ,對左側和上方無效(左側可以嘗試float: right設置超出。也是橫向無滾動)
解決方案
1.中間再包一層
2.max-height:100%;
實例:
<div style="width: 200px; position:relative; top: 200px; background: silver;">
<div class="slidesWrap" style="height:200px">
<div class="slide">
<div style="height:300px; width:100%; background: pink;">content</div>
</div>
<div class="slide">
<div style="height:30px; width:100%; background: green;">content</div>
</div>
</div>
</div>
.slidesWrap {
display: flex;
flex-direction: row;
align-items: flex-end;
}
.slide {
overflow: auto;
flex: 1;
max-height:100%;
}
結果: