是否可以強制內部元素（div.-not-assignable-）適合 div.item-wrapper 的全部內容。樣式 -not-assignable- 無法定義/更改（如果沒有解決方案將使用 React.clone 分配適當的樣式以解決問題 - 只是對純 CSS 解決方案感到好奇）。
.container {
display: flex;
border: 1px solid orange;
height: 50px;
}
.item-wrapper {
display: flex;
min-width: 100%;
border: 1px solid green;
}<div class="container">
<div class="item-wrapper">
<div style="border: 1px solid red;" class="-not-assignable-">Div</div>
</div>
</div>uj5u.com熱心網友回復：
您可以選擇-not-assignable-通過.item-wrapper > div并使用規則flex-grow:1;：
.container {
display: flex;
border: 1px solid orange;
height: 50px;
}
.item-wrapper {
display: flex;
min-width: 100%;
border: 1px solid green;
}
.item-wrapper>div {
flex-grow: 1;
}<div class="container">
<div class="item-wrapper">
<div style="border: 1px solid red;" class="-not-assignable-">Div</div>
</div>
</div>uj5u.com熱心網友回復：
display:grid 而不是 flex 會這樣做，因為你會在兩邊都有拉伸效果：
.container {
display: flex;
border: 1px solid orange;
height: 50px;
}
.item-wrapper {
display: grid;
min-width: 100%;
border: 1px solid green;
}<div class="container">
<div class="item-wrapper">
<div style="border: 1px solid red;" class="-not-assignable-">Div</div>
</div>
</div>uj5u.com熱心網友回復：
您可以從 .item-wrapper 中洗掉 display flex
.container {
display: flex;
border: 1px solid orange;
}
.item-wrapper {
min-width: 100%;
border: 1px solid green;
height: 50px;
}<div class="container">
<div class="item-wrapper">
<div style="border: 1px solid red;" class="-not-assignable-">Div</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/326585.html
標籤：javascript html css
下一篇：flexwrap時的邊距