大きな画像があるときにFlexの子がコンテナをオーバーフローします

私は自分のサイトに使用している固定フレックスコンテナを持っています。固定幅のサイドバーと、ウィンドウとともに拡大するメインコンテンツエリアがあります。これは、メイン領域にテキストのみがある場合はうまく動作しますが、大きすぎるイメージがコンテンツに挿入された場合、その領域は包含divを超えて拡張されます。フレックスメインコンテナに合わせてイメージのサイズを変更するにはどうしたらいいですか？私の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）。あなたの問題を解決するためにこれまでに試したことをお聞かせください。詳細については、良い質問をする方法については[** help article **]（http://stackoverflow.com/help/how-to-ask）を参照し、[**ツアー**] （http://stackoverflow.com/tour）サイトの:) –

最小幅を0に設定します。または他の何らかの適切な値である。また、縮小したい要素のコンテナには、最小幅を小さくする必要があります。フレックスシュリンクを忘れないでください

出典

2017-03-15 02:24:06

大きな画像があるときにFlexの子がコンテナをオーバーフローします

答えて

関連する問題