max-width屬性不適用於flex-item的子項

Question

我將display:Flex設置為.container元素。 我在元素上放了兩個孩子。 並將max-width賦予第二個flex-Item的child（ .box ）。 但這似乎不起作用。

 body { font-family: sans-serif } .container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -moz-flex; display: flex; } .par { position: relative; margin-left: 7px } .round { height: 17px; width: 17px; background: #cacaca; border-radius: 50% } .box { padding: 10px 16px; box-shadow: 0 3px 15px 0px rgba(0, 0, 0, 0.2); background: #fff; position: absolute; font-size: 14px; color: #333; max-width: 200px; left: -11px; top: 28px; } .box::after { content: ""; position: absolute; height: 10px; width: 10px; background: #fff; box-shadow: 2px 2px 5px -1px rgba(0, 0, 0, 0.17); transform: rotate(-137deg); top: -5px; left: 16px; } 

 <div class="container"> <div>Title</div> <div class="par"> <div class="round"></div> <div class="box">This is a Paragraph Text</div> </div> </div> 

Js小提琴鏈接

Answer 1

position: absolute孩子的寬度取決於其position: relative父母。

在您的情況下， .box的寬度取決於.par而.par太窄而無法包含單詞“ Paragraph”。 這就是.box的寬度取決於內容中最長的單詞的原因。

我認為您不能將動態寬度設置為.box而不會超過200px並且也不能保持當前寬度.par 。 也許有2種方法可以解決您的問題。

1. 將.par設置為width: 200px
2. 將固定width: 200px設置為.box

Answer 2

您需要刪除position: relative的.par並去除left and top為.box ，而不是添加樣式.box像margin: 8px 0 0 -11px; ，則max-width可以正常工作。