我正在嘗試使具有溢出x內(nèi)容的Flexbox容器的子div具有100％的溢出寬度，但我無法弄清楚它，進行了多次搜索，但找不到解決方案；有人能幫我嗎？小提琴： https: //codepen.io/joaovtrc/pen/MWaaxKrHTML：<div class="test-container"> <div class="test-item-overflow"> overflowing contenttttttt </div> <div class="test-item-2"></div></div>CSS：.test-container { width: 1000px; height: 500px; margin: auto; background: black; display: flex; flex-direction: column; overflow-x: auto;}.test-item-overflow { width: fit-content; height: 55px; background: red; border: 1px solid yellow;}.test-item-2 { width: 100%; height: 55px; background: blue; border: 1px solid green;}我希望“test-item-2”（藍色背景的那個）div 的寬度與紅色那個 div 的寬度相匹配，但是請記住，紅色框中的內(nèi)容可能并不每次都完全相同，所以沒有 calc( 100% + x) 具有固定參數(shù)...
3 回答
翻閱古今
TA貢獻1780條經(jīng)驗 獲得超5個贊
當(dāng)您為溢出 div 設(shè)置 時width: fit-content;，它會使寬度無法控制，因為它會隨著該 div 中內(nèi)容的增加而增長。一種解決方案可能是更改width: 100%;并添加overflow-x: scroll到類 .test-item-overflow 中。（請參閱下面代碼片段中的更改）
但是，如果您想保留width: fit-content;紅色 div 并更改藍色 div 的寬度以及紅色 div 的寬度（取決于內(nèi)容），您可以添加：document.getElementsByClassName("test-item-2").style.width = document.getElementsByClassName("test-item-overflow").offsetWidth + "px"。（在這種情況下，最好為div定義id并在js代碼中使用getElementById）
.test-container {
width: 1000px;
height: 500px;
margin: auto;
background: black;
display: flex;
flex-direction: column;
overflow-x: auto;
}
.test-item-overflow {
width: 100%;
overflow-x: scroll;
height: 55px;
background: red;
border: 1px solid yellow;
}
.test-item-2 {
width: 100%;
height: 55px;
background: blue;
border: 1px solid green;
}
<div class="test-container">
<div class="test-item-overflow">
aaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div class="test-item-2"></div>
</div>
森欄
TA貢獻1810條經(jīng)驗 獲得超5個贊
所以我真的建議你繼續(xù)添加以下幾行
Margin:0px;
這將占用您的內(nèi)容和瀏覽器之間的所有空間
Padding:0px;
這將消除內(nèi)容和內(nèi)容邊框之間的所有空間
Overflow:hidden;
最后，這應(yīng)該刪除溢出的內(nèi)容。
希望有幫助！
紅顏莎娜
TA貢獻1842條經(jīng)驗 獲得超13個贊
最好用display:grid;在.test-container. 之后，如果您不想在 2 個單元格之間留有間隙，這是由于.test-container { height: 500px; }.
演示：
html body {
width: 100vw;
height: 100vh;
margin: 0px;
overflow: auto;
display: flex;
align-items: center;
background: grey;
}
.test-container {
width: 1000px;
height: 500px;
margin: auto;
background: black;
/*display: flex;
flex-direction: column;*/
display:grid;
overflow-x: auto;
}
.test-item-overflow {
width: 1500px;
height: 55px;
background: red;
border: 1px solid yellow;
}
.test-item-2 {
width: 100%;
height: 55px;
background: blue;
border: 1px solid green;
}
<div class="test-container">
<div class="test-item-overflow">
overflowing contenttttttt
</div>
<div class="test-item-2"></div>
</div>
- 3 回答
- 0 關(guān)注
- 220 瀏覽
添加回答
舉報
0/150
提交
取消