dependent dimensions in css

[C]

Is there any css for a div to to depend on the dims of peer? Such that div B overlays div A, so when a click occurs and A is shown it fully covers B and if B is shown fully covers A?

How would you set the parent container size to be the max of both A&B since they show overlaying each other so the parent size doesn’t change.

flexbox has stretch but can stretch work with non adjacent overlapping elements?

concept in jsfiddle: https://jsfiddle.net/tirams/nu8jzuux/

[bearhead]

simplest way would be to give the parent element set dimensions, and then let the children elements be 100% width and height of that.

Or if you can’t specify exact dimensions, maybe try showing/hiding elements instead of changing their z-index:
http://codepen.io/kvana/pen/VagqBM

[C]

How would I make the parent container size not change, no matter what is showing?

[bearhead]

Like I wrote, you could give the parent set dimensions and then give the child elements width:100%; height:100%.

[C]

Real question is there a way I can make the parent dimensions dynamic (depending on the childrens max dimensions) not a hard coded value?

[bearhead]

In your case, I think the basic answer is that you’ll probably have to use javascript to get the height/width of the child elements, choose the largest of each, and then apply those dimensions to the parent element.

[Author]

Posts