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。