39 replies

Flex layout issue

humans help!
I have a layout issue where in this layout divs id3,5 break out of parent div (they are external and I can't style them directly). How do I set this up to work? (green and orange need to stay inside blue)

<div id="1" style="width: 100px; display: flex; flex-direction: column;" >
    <div id="2" style="flex-grow: 1;">
        <div id="3" style="width: 200px; height: 100px" ></div>
    </div>

    <div id="4" style="flex-grow: 1;">
        <div id="5" style="width: 200px; height: 100px"></div>
    </div>
</div>

<div id="1" style="width: 100px; display: flex; flex-direction: column;" >
    <div id="2" style="flex-grow: 1;">
        <div id="3" style="width: 200px; height: 100px" ></div>
    </div>

    <div id="4" style="flex-grow: 1;">
        <div id="5" style="width: 200px; height: 100px"></div>
    </div>
</div>

<div id="1" style="width: 100px; display: flex; flex-direction: column;" >
    <div id="2" style="flex-grow: 1;">
        <div id="3" style="width: 200px; height: 100px" ></div>
    </div>

    <div id="4" style="flex-grow: 1;">
        <div id="5" style="width: 200px; height: 100px"></div>
    </div>
</div>

<div id="1" style="width: 100px; display: flex; flex-direction: column;" >
    <div id="2" style="flex-grow: 1;">
        <div id="3" style="width: 200px; height: 100px" ></div>
    </div>

    <div id="4" style="flex-grow: 1;">
        <div id="5" style="width: 200px; height: 100px"></div>
    </div>
</div>

Flex layout issue

Similar Threads

Similar Threads

Similar Threads