Is fit-content supposed to apply to flexboxes?

[mahks]

Been trying to create a grid/table like structure using pure css & flexbox.

Having a problem getting flex containers to "wrap" overflowing children, so scroll will view properly.

See the fiddle : http://jsfiddle.net/mahks/hserczk5/4/

Wondering if width:-moz-fit-content is supposed to work in that situation.

If you remove width for the sk_row class and scroll, the the row does not wrap the children, which is my goal.

[jscher2000]

Same result with -moz-max-content, which at least is consistent.

It appears that the -moz-max-content is computed as though

.itm_val { flex:none; }

Is it a bug? I have no idea. Also, I didn't search https://bugzilla.mozilla.org/

The closest workaround I could find is

Code: Select all

.itm_val {
    border: 1px solid #000;
    background: none repeat scroll 0% 0% #666;
    height: 30px;
    margin: 0px 5px;
    display: inline-block;
    width: 100px;
    text-align: center;
}

but it lacks the nice vertical centering.

[mahks]

Yes I had this all working with inline:block, but converted it all to flex.

May have to go back to the old format...

I found nothing about it in bugzilla, should I report it?

[jscher2000]

You might have filed by now but, if not, I see no harm in doing so. If it's a duplicate, or if it's as expected, someone will let you know.

[patrickjdempsey]

I think you need to use flex-wrap to get them to wrap:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/

To get the items to all be the same width you need to set flex-grow:1

IMO wrapping content like this usually ends up looking weird. For instance if you have rows and columns that look like this:

[()()()()()()()()]
[()()()()()()()()]
[()()()()()()()()]

And then you make the container width smaller so they wrap, you end up with a mess like this:

[()()()()()()
()()]
[()()()()()()
()()]
[()()()()()()
()()]

One thing you can try is to nest them so that instead of trying to build columns and rows like a table, you build sets of blocks inside one container that can slide around:

[{()()()()}{()()()()}
{()()()()}{()()()()}
{()()()()}{()()()()}]

So if you make the container narrower, they shuffle positions:

[{()()()()}
{()()()()}
{()()()()}
{()()()()}
{()()()()}
{()()()()}]

And if you make the container wider, they shuffle in the other direction:

[{()()()()}{()()()()}{()()()()}
{()()()()}{()()()()}{()()()()}]

Note that for this to all work and still see rows, the individual items all need to have a fixed width, or a width linked by flex-grow. Just remember some of this stuff is not supported in IE or Safari.