flex 不尊重 chrome 中的子項寬度

Question

 .parent { width: 100%; display: flex; flex-direction: row; }.outer-item { flex-direction: row; display: flex; }.bsimplelayout { flex: auto; min-width: 0; max-width: none; display: flex; flex-flow: column wrap; }.item { border: 1px solid red; display: flex; flex-direction: row; }.label { flex: 0 0 120.0px; }.field-item { width: auto; }

 <div class="parent"> <div class="outer-item"> <div class="bsimplelayout"> <div class="item"> <label class="label">label left</label> <div class="field-item"> <select class="standard" style="width:auto"> <option value="Arapp:Administrator" title="">Arapp:Administrator</option> <option value="Arapp:Manager" title="">Arapp:Manager</option> <option value="Arapp:ManagersManaged" title="">Arapp:ManagersManaged</option> <option value="Arapp:PegaAPI" title="">Arapp:PegaAPI</option> <option value="Arapp:User" title="">Arapp:User</option> <option value="Arapp:UsersManaged" title="">Arapp:UsersManaged</option> <option value="UIRegressionFlex:ClientActivityTracking" title="">UIRegressionFlex:ClientActivityTracking</option> </select> </div> </div> </div> </div> </div>

“項目” div 應該已經擴展到所有的孩子。

預期：- “項目” div 應該已經擴展到所有子項的末尾。紅色邊框應該覆蓋所有子項。 實際：-“項目” div 不覆蓋孩子。參考紅色邊框

不想刪除添加的 120px 的 flex 基礎。

Answer 1

有特殊的道具flex-grow和flex-shrink女巫為寬度大於或小於父容器的元素提供行為嘗試添加 flex-grow: 1; 到 div.item。