Flex容器在大圖像時溢出容器

我有一個用於我的站點的通用Flex容器，它有一個固定寬度的側欄和隨窗口一起增長的主內容區域。當主區域只有文本時，這可以正常工作，但如果太大的圖像被插入到內容中，該區域將擴展到包含div之外。我怎樣才能做到這一點，圖像將被調整大小以適應flex-main容器？這是我的CSS代碼：Flex容器在大圖像時溢出容器

.generic-flex-container 
{ 
    display: flex; 
    margin: auto; 
    margin-bottom: 50px; 
    max-width: 1280px; 
    overflow: hidden; 
    width: 90%; 

    .flex-main 
    { 
     flex: 1 1; 
     padding-right: 20px; 
    } 

    .flex-sidebar 
    { 
     border-left: 1px solid lightgrey; 
     flex: 0 0 300px; 
     padding-left: 20px; 
    } 
}

來源

2017-03-15 Mike

歡迎來到StackOverflow！爲了讓我們更好地幫助您，請更新您的問題，以便以[**最小，完整和可驗證的示例**]（http://stackoverflow.com/help/mcve）顯示所有相關代碼（包括HTML）。如果您能讓我們知道您迄今爲止已經嘗試解決您的問題，也會有所幫助。有關詳細信息，請參閱[**幫助文章**]（http://stackoverflow.com/help/how-to-ask），瞭解如何提出好問題，並參加[**遊覽**] （http://stackoverflow.com/tour）的網站:) –

設置最小寬度：0;或其他適當的價值。另外，任何你想縮小的元素的容器都需要縮小其最小寬度。別忘了flex-shrink

來源

2017-03-15 02:24:06

Flex容器在大圖像時溢出容器

回答

相關問題