flex:1, display:flex on the same element?

Question

I cannot find reliable information online or in caniuse website.

Is it 'legal' and well supported to use display: flex on a flexbox item? I mean:

.parent{
   display: flex;
}

.child{
   flex:1;
   display: flex;
}

And do you maybe know of any browser support chart?

This is legit to use and is referred as _nested_ flex containers. Any browser that support `display: flex` support _nested_ containers — Asons, Jul 05 '17 at 09:08

Paulie_D · Accepted Answer · 2017-07-05T10:07:01.230

2

It's not a matter of "support".

display:flex makes an element a "flex-parent".

flex: 1 applies only to "flex-children".

It's entirely "legal" because the two properties don't apply for the same reasons and aren't specifically related.

For information on nested flexboxes, you can refer to the W3.org Specification*

^{* Thanks to LGSon}

edited Jul 05 '17 at 10:07

answered Jul 05 '17 at 09:04

Paulie_D

Ok, but do you know of any info about browser support? I mean, if I use this, will it be correctly interpreted by browsers? What browsers? This specific information seems not to be available on caiuse. – Luca Reghellin Jul 05 '17 at 09:07
1

Your basic question is nothing to do with support.. If a browser supports flexbox it supports both those properties. – Paulie_D Jul 05 '17 at 09:08
1

@Stratboy The official info about nested boxes is here, [https://www.w3.org/TR/css-flexbox-1/#abstract](https://www.w3.org/TR/css-flexbox-1/#abstract), so you can safely accept this answer :) – Asons Jul 05 '17 at 10:03

1 Answers1