Flex child overflows container when it has large images

Question

I have a generic flex container I'm using for my site, with a fixed-width sidebar and a main content area that with grow with the window. This works fine when the main area has only text, but if images that are too large are inserted into the content the area will expand beyond the containing div. How can I make it so the image will be resized to fit the flex-main container? Here's my CSS code:

.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;
    }
}

Welcome to StackOverflow! In order for us to help you better, please update your question so that it shows all relevant code in a [**minimal, complete, and verifiable example**](http://stackoverflow.com/help/mcve) (including HTML). It would also be helpful if you could let us know what you have tried so far to solve your problem. For further information, please refer to the [**help article**](http://stackoverflow.com/help/how-to-ask) regarding how to ask good questions, and take the [**tour**](http://stackoverflow.com/tour) of the site :) — Obsidian Age, Mar 15 '17 at 02:33

score 0 · Answer 1 · edited Apr 19 '18 at 07:14

0

Set the min-width: 0; or some other appropriate value. Also, any containers of elements you want to shrink need their min-width reduced.

Don't forget flex-shrink

edited Apr 19 '18 at 07:14

Sunil Garg

14,608
25
132
189

answered Mar 15 '17 at 02:24

Glen Pierce

4,401
5
31
50

Flex child overflows container when it has large images

1 Answers1