How-To: Nested Vertical Flexboxes inside Fixed Height Body

[pworder]

One of the primary reasons I embraced Ink is because of the FlexBox support. I do see that Ink supports vertical flex layouts but I haven't gotten them to work very well.

Specifically I'm looking to be able to next one vertical flex layout inside another vertical flex layout - inside a body with a fixed height, the height of the window viewport.

Does anyone know that this is indeed possible with Ink and can provide an example. Thanks!

[pworder]

After I revisited this, I was able to achieve mostly what I was looking for with the following. But why don't ink-grid and vertical inherit the height by default?

        html, body {
            height:100%;
            min-height:100%;
        }
        .ink-grid, .vertical {
            height:inherit;
            min-height:inherit;
        }

[pedrocorreia]

Hi @pworder, sorry for the late reply, but me and @gnpfonseca have been really busy with other projects.

If i understand you correctly, the reason that doesn't happen is by default, as you must know elements have no height. Height is usually given by the content, so we didn't feel it to be necessary to change the normal/expected behavior.

Could you give me an example of what you're trying to do on jsfiddle or a similar code sharing thing?

[pworder]

Working on sample code… Coming up.

From: Pedro Correia [mailto:notifications@github.com] Sent: Friday, November 14, 2014 11:20 AM To: sapo/Ink Cc: Philip Weaver Subject: Re: [Ink] How-To: Nested Vertical Flexboxes inside Fixed Height Body (#406)

Could you give me an example of what you're trying to do on jsfiddle or a similar code sharing thing?

— Reply to this email directly or view it on GitHubhttps://github.com/sapo/Ink/issues/406#issuecomment-63098134.

[pworder]

I'm trying to get the columns to stretch to fit the middle row. http://jsfiddle.net/tmuh5qef/

I'm able to achieve the layouts I'm looking for using https://github.com/maxsteenbergen/Fibonacci but I'm trying to get Ink Flex Grid to work the same way.

[pedrocorreia]

Ok. I'll have a look and get back to you!

[pworder]

https://github.com/maxsteenbergen/Fibonacci/blob/master/css/fibonacci.css

The Fibonacci CSS does everything I need but I haven't yet figured out how to incorporate this CSS into Ink. Fibonacci allows me to nest a set of rows even inside another set of rows - and the heights of all sets recalculate as I resize the window (after setting body height to 100%).

[mariomc]

Try to check if this is correct: http://jsfiddle.net/tmuh5qef/3/

As seen in a similar issue in SO, seems that Chrome has an issue with setting 100% height on a flex element when that element is the (direct) child of another flex element. You kind-of need to set them as absolutely positioned in order for it to work.

[pedrocorreia]

@pworder have you seen Mario's solution?

[pworder]

Thank so much for taking a look at this Mario and Pedro. The solution looks promsing and I hope that maybe one day Ink will add this behavior as a css class.

My ultimate goal to be have everything stretch to fit height and fits widths. The next things I’ll be looking at are:

1.  nesting vertical layouts inside of other vertical layouts.

2.  nesting vertical inside horizontal inside vertical inside horizontal, and so forth… all stretching to fit the available space.

From: Pedro Correia [mailto:notifications@github.com] Sent: Tuesday, November 18, 2014 10:55 AM To: sapo/Ink Cc: Philip Weaver Subject: Re: [Ink] How-To: Nested Vertical Flexboxes inside Fixed Height Body (#406)

@pworderhttps://github.com/pworder have you seen Mario's solution?

— Reply to this email directly or view it on GitHubhttps://github.com/sapo/Ink/issues/406#issuecomment-63503476.

[pedrocorreia]

Hi again @pworder,

Glad we could help.