css - Padding-bottom/top in flexbox layout -

i have flexbox layout containing 2 items. 1 of them uses padding-bottom :

#flexbox {    border: 1px solid red;    width: 50%;    margin: 0 auto;    padding: 1em;    display: flex;    flex-direction: column;  }  #text {    border: 1px solid green;    padding: .5em;  }  #padding {    margin: 1em 0;    border: 1px solid blue;    padding-bottom: 56.25%; /* intrinsic aspect ratio */    height: 0;  }

<div id='flexbox'>    <div id='padding'></div>    <div id='text'>some text</div>  </div>

the blue element maintains aspect ratio according width when page resized. this works chrome , ie , looks :

however, in firefox , edge, following (it's ignoring padding on blue box, maintains aspect ratio):

i'm new flexbox understand if should or shouldn't work. whole point of flexbox resize things, i'm not sure why ignoring intrinsic padding, , putting absolute sizes on blue element.

i guess i'm not sure if firefox or chrome doing correct thing! can firefox flexbox experts help?

update april 2016

(still valid in may 2017)

the specs have been updated to:

percentage margins , paddings on flex items can resolved against either:

• their own axis (left/right percentages resolve against width, top/bottom resolve against height), or,
• the inline axis (left/right/top/bottom percentages resolve against width)

source: css flexible box layout module level 1

this means chrome ie ff , edge (even if don't have same behaviour) follow specs recomendation.

specs say:

authors should avoid using percentages in paddings or margins on flex items entirely, different behavior in different browsers. [source]

---

work around :

you can wrap first child of flex container in other element , put padding-bottom on second child :

#flexbox {    border: 1px solid red;    width: 50%;    margin: 0 auto;    padding: 1em;    display: flex;    flex-direction: column;  }  #text {    border: 1px solid green;    padding: .5em;  }  #padding {    margin: 1em 0;    border: 1px solid blue;  }  #padding > div {    padding-bottom: 56.25%; /* intrinsic aspect ratio */  }

<div id='flexbox'>    <div id='padding'><div></div></div>    <div id='text'>some text</div>  </div>

i tested in modern browsers (ie, chrome, ff , edge) , have same behaviour. configuration of 2nd child "same usual", suppose older browsers (that aslo support flexbox layout module) render same layout.

---

previous answer:

according specs, firefox has right behaviour

explanantion :

unlike block items calculate % margin/padding according containers width, on flex items:

percentage margins , paddings on flex items resolved against respective dimensions; unlike blocks, not resolve against inline dimension of containing block.

source dev.w3.org

this means padding-bottom/top , margin-bottom/top calculated according height of container , not width in non-flexbox layouts.

as have not specified height on parent flex item, bottom padding of child supposed 0px.
here fiddle fixed height on parent shows padding bottom calculated according height of display:flex; container.

---