I have a fairly specific CSS issue.
Please look at the codepen, as pretty much everything is explained in there… but here is a bit more explanation:
There are two rows (inside a container) that both have the same basic flexbox implementation –
{
width: auto;
display: flex;
align-items: flex-start;
}
The top row houses a page header, with a title on the right, and an image flush right.
The bottom row also houses two divs – the left div has a static width, but the right is fluid, depending on whatever text is inside there (which changes from pageload to pageload – in reality this will be a list of names with varying lengths).
The goal is for the top row’s width to be determined by the bottom row, via using CSS. But I have no idea how to do this in flexbox.
Currently the display:flex container divs’ widths are both 100% of the browser.
The bottom row’s layout and implementation is set in stone / needs to use flexbox, but the top row is flexible in how it is accomplished.
I am familiar with CSS and know this is not usually how it goes, in general width is passed down from the parent container… so I’m not even sure if this is possible? I can break down and do it in JS if needed, but I always prefer a CSS-only solution!
Any thoughts would be greatly appreciated!
2
Answers
You can do something like this. I think all you would need to do in your code is add one more wrapper layer between your
container
and your two flex boxes.Not super certain if this is what you really want to happen. First you forgot to have closing paragraph. You can contain your 2 elements in a max-width so they can align the way you want them to be. On your pageContent–fluidRight you can try to put a max width on it so the text will wrap on its own. See sample below if this is what you mean and let me know.