Forum How do I...?

flex containers not aligning bottom edges

jweberLUD
In the attached example, there are two containers side-by-side which are supposed to be the same size, and appear as such in the browser. When being produced through Prince 12, the bottoms do not align.

This may be a known issue that was resolved in a newer version of Prince, but we aren't in a position to be able to upgrade Prince quite yet. I wasn't sure if there was a workaround we could use until then.
  1. index.html9.0 kB
    Example

Edited by jweberLUD

markbrown
You could try the two pass solution. For example, in the first pass calculate the height of each .wrapper-options element and output a snippet of CSS that sets each child's height to the calculated value. Then include this snippet in the second pass.

Mark
jweberLUD
Thank you.

Our current platform doesn't support the ability to do multiple passes. If you happen to have additional workaround, I would be interested. Otherwise, we will note this as a known issue with our current platform until we make further upgrades to our system.
markbrown
Another possible workaround is to put the background on a large block element placed between the title and options, with a negative bottom margin to give it zero effective height. Then place overflow:hidden on the .wrapper-options element so the excess background is removed.

Here's one way to do that just with some additional CSS:
.wrapper-options {
    overflow: hidden;
}

.wrapper-options .options .title:after {
    display: block;
    content: "\00A0";
    background-color: #EBF5FF;
    height: 30rem;
    margin-top: 0.4rem;
    margin-bottom: -30.4rem;
}


Hope this helps :-)
jweberLUD
Excellent!

I gave it a try on my side to verify beforehand. Confirmed working!

I really appreciate it.