MozillaZine

Is fit-content supposed to apply to flexboxes?

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
mahks

User avatar
 
Posts: 31
Joined: September 9th, 2009, 5:08 pm

Post Posted November 14th, 2014, 6:53 pm

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.
Ignorance is being uninformed, persisting once informed is being ignorant.

jscher2000

User avatar
 
Posts: 10578
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted November 19th, 2014, 8:10 pm

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

User avatar
 
Posts: 31
Joined: September 9th, 2009, 5:08 pm

Post Posted November 19th, 2014, 10:27 pm

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?
Ignorance is being uninformed, persisting once informed is being ignorant.

jscher2000

User avatar
 
Posts: 10578
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted November 30th, 2014, 4:30 pm

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

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted November 30th, 2014, 6:48 pm

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.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 1 guest