Kevin Powell - Community•6mo ago

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>

36 Replies

sasxaOP•6mo ago

I've been talking to AIs too much 😄 they can't solve this

Chris Bolson•6mo ago

Your container has a fixed width of 100px and the children have a fixed width of 200px so inevitably they will overflow. You say that they are external so, assuming that you can't modify the HTML at all you will either have to attempt to do this with CSS or JavaScript. It is further complicated by the fact that the various divs have been given numeric ids. This is not valid and makes it hard to select them with CSS or JavaScript.

sasxaOP•6mo ago

This is just fastest way I can reproduce the issue - it's not actual code

Chris Bolson•6mo ago

ah, so does the actualy code have valid ids? or any other attribute that you could use to select them?

sasxaOP•6mo ago

the real problem is how to control width-scaling in column layout, I guess

rayannn•6mo ago

doesnt box sizing; border-box prevent them from breaking out of their container

*{
box-sizing; border-box
}

sasxaOP•6mo ago

That didn't help

MarkBoots•6mo ago

no, that only determins how the width an height is calculated (normally content-box, but changable to padding or borderbox)

rayannn•6mo ago

i think Chris mentioned this but your child container have 200px and the parent 100px so that might be it?

MarkBoots•6mo ago

that's is causing the issue yes. you could try to add a max-width (100%) with css

Chris Bolson•6mo ago

If you are using flex then you need to play around with flex-shrink, flex-grow and flex-basis. But if you can't modify the HTML then the first thing that you need to do is to see how to select them.

sasxaOP•6mo ago

But isn't max-width calculated from the cildren, not the parent?

MarkBoots•6mo ago

max-width on #3 and #5

sasxaOP•6mo ago

#3 and #5 are actually a external rendered markdown, so I can't specify anything on them

MarkBoots•6mo ago

you're example is not sufficient enough. we need more info. can you add stylesheets? what is the exact html? are those inline styles really there or is the styling coming from somewhere else

Chris Bolson•6mo ago

So, as I said, you need to select them and modify them via the CSS style sheet or via JS.

sasxaOP•6mo ago

no ideas what I could try on #1 and #2 to make "children behave" ? 🙂

MarkBoots•6mo ago

css has childselectors, so that shouldnt be an issue to target but we still didn't have an answer to 'are those really the id-names`?

Chris Bolson•6mo ago

just updated their width with max-width as Mark has said. max-width: 100%; assuming that we can target the parent. If it has a number as an id an no other selectable attribute it gets a bit more complicated.

MarkBoots•6mo ago

[id="3"] would work (i think?)

Chris Bolson•6mo ago

ah, yes, that works 👍

MarkBoots•6mo ago

:is([id="1"],[id="2"]) > * > * { 
  max-width: 100%;
}

:is([id="1"],[id="2"]) > * > * { 
  max-width: 100%;
}

but probably also just

:is([id="3"],[id="5"]) {
  max-width: 100%;
}

:is([id="3"],[id="5"]) {
  max-width: 100%;
}

sasxaOP•6mo ago

Ok, I tracked down the issue - this is better representation of that's going on

sasxaOP•6mo ago

Font size on the h1 (previously div#3) is what's messing up my layout

MarkBoots•6mo ago

so, what do you want it to be? you are trying to squeez in the text into just 100px of width? we are still missing context here

rayannn•6mo ago

i had the text issue once and i think max-width fixed it but it might not be the same issue as you are having

sasxaOP•6mo ago

Here is the context - purple box is rendering markdown that's oversized

sasxaOP•6mo ago

I don't know what it can be - maybe someone puts image 1000px wide, so I'm trying to make radnom unknown content fit into my layout

rayannn•6mo ago

i think making a codepen might be easier, makes it a bit easier to assist

MarkBoots•6mo ago

that's much more complex than your example. we deffinetly need the total markup and applied styles to know what we need to target and override

sasxaOP•6mo ago

This is as simple as I can make it.. Goal is for text not to overflow https://codepen.io/Development-Account-the-lessful/pen/rNgzeOb

MarkBoots•6mo ago

then where does the text need to go? you want a scrollbar (overflow-x: auto) ? force a word-break (word-break: break-all) ?

sasxaOP•6mo ago

I would just hide it, somehow.. .Could be a long word 🙂

MarkBoots•6mo ago

overflow: hidden then h1 { max-width: 100%; overflow:hidden}

Chris Bolson•6mo ago

as Mark says, this is more complex as potentially you want to cover no-end of possibilities. You could set up some defaults like max-width on the image and any other html element for that matter. You could add some predefined font sizes for each of the text tags... And, as a last resort, the fall-back of overflow: hidden (or overflow: auto to allow the box to scroll?)

sasxaOP•6mo ago

👍 Thanks for the help. I now know what the problem is, I'll tinker until I get a working solution. For the sake of completion, the best solution for my original question would be:

[id="3"] {
  overflow-y: auto;
  overflow-x: hidden;
}

[id="3"] {
  overflow-y: auto;
  overflow-x: hidden;
}

Gaming

Programming

Flex layout issue