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.
Is fit-content supposed to apply to flexboxes?
- mahks
- Posts: 32
- Joined: September 9th, 2009, 5:08 pm
Is fit-content supposed to apply to flexboxes?
Ignorance is being uninformed, persisting once informed is being ignorant.
- jscher2000
- Posts: 11762
- Joined: December 19th, 2004, 12:26 am
- Location: Silicon Valley, CA USA
- Contact:
Re: Is fit-content supposed to apply to flexboxes?
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
but it lacks the nice vertical centering.
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
- Posts: 32
- Joined: September 9th, 2009, 5:08 pm
Re: Is fit-content supposed to apply to flexboxes?
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?
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
- Posts: 11762
- Joined: December 19th, 2004, 12:26 am
- Location: Silicon Valley, CA USA
- Contact:
Re: Is fit-content supposed to apply to flexboxes?
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
- Posts: 23686
- Joined: October 23rd, 2008, 11:43 am
- Location: Asheville NC
- Contact:
Re: Is fit-content supposed to apply to flexboxes?
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.
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/
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/