Flex內容可以強制父網格元素的寬度嗎？

我有一個全寬度的組件，它由三部分組成：一個寬度由其固定內容（一個字符串）驅動的中央元件和兩個距離該中央元件的左右兩個窗格，。要做到這一點Flex內容可以強制父網格元素的寬度嗎？

一種方法是使用一個grid顯示器，並設置列作爲grid-template-columns: 1fr auto 1fr;：

#container { 
 
    display: grid; 
 
    grid-template-columns: 1fr auto 1fr; 
 
}

<div id="container"> 
 
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultricies at quam vel efficitur. Donec dictum lorem eu dolor pulvinar facilisis. Fusce mollis egestas orci et consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur 
 
    pulvinar, sem nec eleifend tincidunt, neque eros porttitor arcu, nec porttitor sem felis id risus. Nulla posuere, lectus vitae auctor rhoncus, metus purus pellentesque ante, vel interdum ex metus eget nisl. Nunc feugiat ipsum pharetra, ultricies justo 
 
    ac, condimentum risus. 
 
    </div> 
 
    <div>hello</div> 
 
    <div>world</div> 
 
</div>

它將按預期：核心要素需要它的空間，和兩個窗格（lorem ipsum和世界）平分秋色。

在我的真實應用程序中，我有由display: flex驅動的元素填充的左側和右側窗格。它看起來像這樣設置覆蓋父元素，它被認爲是1fr而是擴展爲元件在填充它，如在下面的例子中的寬度：

#container { 
 
    width: 600px; 
 
    display: grid; 
 
    grid-template-columns: 1fr auto 1fr; 
 
} 
 

 
#lpane { 
 
    display: flex; 
 
    flex-direction: row; 
 
}

<div id="container"> 
 
    <div id="lpane"> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    </div> 
 
    <div>hello</div> 
 
    <div>world</div> 
 
</div>

爲什麼是這樣嗎？有沒有辦法強制父元素實際上遵循1fr的設置，而不是擴大，因爲它填充了flex元素（它應該流入一個新的行，由父母的寬度限制）？

來源

2017-06-13 WoJ

網格項目（和柔性物品）的初始設定是'最小寬度：auto'。這意味着一個項目不能小於其內容的寬度。您需要覆蓋此默認行爲。一種方法是「溢出：隱藏」。 https://jsfiddle.net/pacujwy9/ –

@Michael_B：謝謝。你的評論是對我的問題的一個確切答案（如何強制父母行爲如預期），但我的實際意圖是讓內容流（因此不強制父寬度 - 這是由丹尼爾回答）。感謝您的鏈接，他們是一個很好的閱讀。 – WoJ

容器很好，只是內容溢出而已。

設置flex-wrap: wrap;到#lpane

#container { 
 
    width: 600px; 
 
    display: grid; 
 
    grid-template-columns: 1fr auto 1fr; 
 
} 
 

 
#lpane { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
}

<div id="container"> 
 
    <div id="lpane"> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    <div>something</div> 
 
    </div> 
 
    <div>hello</div> 
 
    <div>world</div> 
 
</div>

來源

2017-06-13 19:55:20

Flex內容可以強制父網格元素的寬度嗎？

回答

相關問題