我有一個很長的彈性串列，當它們沒有足夠的空間（彈性包裝）時，它應該包裝它的專案（按鈕）。但是，一旦串列獲得滾動條，即使有足夠的空間，專案也會被包裹在 Firefox 中。
Chrome 按預期并排顯示按鈕。
（我在這里使用 Vue，以保持 HTML 簡單。它實際上只創建了 30 次 text/button 元素）
new Vue({
el: "#app",
})body, html {
margin: 0;
}
.container {
position: absolute;
height: 100vh;
overflow: auto;
}
.row {
display: flex;
flex-wrap: wrap;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="container" id="app">
<div v-for="(i, index) in 30" :index="i">
Text
<div class="row">
<button>Button 1</button>
<button>Button 2</button>
</div>
<hr />
</div>
</div>uj5u.com熱心網友回復：
我看到 flex 容器占用了視口中的全部可用空間，正如height: 100vh;. 我正在使用火狐。
那么你的下一個問題不是關于垂直空間，而是如何正確顯示行內元素。你應該有你的按鈕display: inline-block;開始。
然后你應該嘗試設定最近父元素的寬度......我首先向父元素添加了一條規則，.container > div以便它們的寬度設定為width:fit-content;. 后來我把它移到了.container，并使用overflow-y: scroll.
使用overflow: auto時只會在需要時顯示滾動條，但容器大小不會考慮滾動條是否顯示的可能性。因此，如果它們將被顯示，它們將占據覆寫內容的內部空間。
使用overflow: scroll時，它將始終顯示滾動條，并且容器大小將始終將它們考慮在內。
為了使容器大小在使用時也自適應，這里使用overflow: auto了幾個選項，例如：
scrollbar-gutter: stable;
https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter
但最后，為了更好地控制容器的寬度，您可以通過 javascript 檢查內容是否溢位容器，并且僅在這種情況下添加（或在相反情況下取消設定） css 屬性overflow: scroll。
我還添加了box-sizing: border-box以避免容器占用一些額外的垂直空間。
這是一個演示，顯示了兩個相鄰的“應用程式”，一個具有內容未溢位的容器（因此沒有滾動條），另一個具有內容溢位（因此顯示滾動條）：
此解決方案在調整視窗大小時重繪 容器，并在內容的溢位條件發生更改時添加/洗掉滾動條。
new Vue({
el: "#app1",
})
new Vue({
el: "#app2",
})
refreshPage();
window.addEventListener('resize', refreshPage);
function refreshPage(){
const app1 = document.getElementById('app1');
const app2 = document.getElementById('app2');
const isApp1Overflowing = app1.scrollHeight > app1.clientHeight;
const isApp2Overflowing = app2.scrollHeight > app2.clientHeight;
if (isApp1Overflowing)
app1.style.overflowY = 'scroll';
else
app1.style.overflowY = 'unset';
if (isApp2Overflowing)
app2.style.overflowY = 'scroll';
else
app2.style.overflowY = 'unset';
}body, html {
margin: 0;
}
.container {
/*added borders to container to better highlights its size*/
border: solid 1px black;
/*it will take 100% of viewport height*/
height: 100vh;
/*scroll instead of auto to have the scrollbar not occupying inner space*/
/*overflow-y: auto;*/
/*scrollbar-gutter: stable;*/
/*fit-content will adapt to content, otherwise if unset will go 100%*/
width: fit-content;
/*to add some padding from the container borders*/
padding: 5px;
white-space: nowrap;
vertical-align:top;
box-sizing: border-box;
}
.row button{
/*to have the buttons next to each other*/
display: inline-block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="container" id="app1" style="display: inline-block">
<div v-for="(i, index) in 5" :index="i">
Text
<div class="row">
<button>Button 1</button>
<button>Button 2</button>
</div>
<hr />
</div>
</div>
<div class="container" id="app2" style="display: inline-block">
<div v-for="(i, index) in 25" :index="i">
Text
<div class="row">
<button>Button 1</button>
<button>Button 2</button>
</div>
<hr />
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/481338.html