Padding-bottom/top in flexbox layout

Update September 2020

Firefox and edge have implemented the behaviour from the specs and margin + padding for flex elements are both calculated according to the width of the containing block.
Just like block elements.

Update February 2018

Firefox and edge have agreed to change their behaviour on top, bottom margin and padding for flex (and grid) items :

[…] e.g. left/right/top/bottom percentages all resolve against their containing block’s width in horizontal writing modes. [source]

This is not yet implemented (tested on FF 58.0.2).

Update April 2016

(still valid in may 2017)

The specs have been updated to:

Percentage margins and paddings on flex items can be 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 all resolve against width)

source: CSS Flexible Box Layout Module Level 1

This means that chrome IE FF and Edge (even if they don’t have the same behaviour) follow the specs recommendation.

Specs also say:

Authors should avoid using percentages in paddings or margins on flex
items entirely, as they will get different behavior in different
browsers. [source]

Workaround

You can wrap the first child of the flex container in an other element and put the padding-bottom on the 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 this in modern browsers (IE, chrome, FF and Edge) and they all have the same behaviour. As the configuration of the 2nd child is the “same as usual”, I suppose that older browsers (that also support flexbox layout module) will render the same layout.

Previous answer

According to the specs, Firefox has the right behaviour

Explanation

Unlike block items which calculate their % margin/padding according to the containers width, on flex items:

Percentage margins and paddings on flex items are always resolved
against their respective dimensions; unlike blocks, they do not always
resolve against the inline dimension of their containing block.

source dev.w3.org

This means that padding-bottom/top and margin-bottom/top are calculated according to the height of the container and not the width like in non-flexbox layouts.

As you have not specified any height on the parent flex item, the bottom padding of the child is supposed to be 0px.

Here is a fiddle with a fixed height on the parent that shows that padding bottom is calculated according to the height of the display:flex; container.

Related Contents:

  1. Make a div span two rows in a grid
  2. Chrome / Safari not filling 100% height of flex parent
  3. What are the differences between flex-basis and width?
  4. Bootstrap align navbar items to the right
  5. How does flex-wrap work with align-self, align-items and align-content?
  6. Align 3 unequal blocks left, center and right
  7. Flex-box: Align last row to grid
  8. When to use margin vs padding in CSS [closed]
  9. Text in a flex container doesn’t wrap in IE11
  10. Aligning grid items across the entire row/column (like flex items can)
  11. Equal height rows in CSS Grid Layout
  12. Better way to set distance between flexbox items
  13. Make flex-grow expand items based on their original size
  14. How to make flexbox items the same size?
  15. How can I make Flexbox children 100% height of their parent?
  16. Bootstrap 4 navbar with 2 rows
  17. Areas covered by Flexbox which are difficult or impossible to achieve with Grid
  18. Bootstrap 4 masonry layout utilizing flexbox grid
  19. How can I align one item right with flexbox?
  20. Margin collapsing in flexbox
  21. What do “flex” and “justify-content” achieve that “text-align” doesn’t?
  22. css grid of squares with flexbox
  23. CSS flexbox not working in IE10
  24. Every item to have the same width as the widest element [duplicate]
  25. How to style a div to be a responsive square? [duplicate]
  26. Height 100% on flexbox column child [duplicate]
  27. A grid layout with responsive squares
  28. Set flexbox children to have different heights to use up available space
  29. React native text going off my screen, refusing to wrap. What to do?
  30. Flexible box model – display : flex, box, flexbox? [duplicate]
  31. Maintain aspect ratio according to width and height
  32. Without media queries how to achieve 3 column desktop to 1 column mobile layout
  33. How to keep wrapped flex-items the same width as the elements on the previous row?
  34. firefox overflow-y not working with nested flexbox
  35. What are the differences between flex-grow and width?
  36. Removing display:flex adds spaces around a link. Why?
  37. Usage of display property of flex box items
  38. How do I set distance between flexbox items?
  39. How to specify an element after which to wrap in css flexbox? [duplicate]
  40. How can I make a div span multiple rows and columns in a grid?
  41. How can I change the order of Bootstrap columns?
  42. Prevent flex items from overflowing a container
  43. CSS3 Flexbox: display: box vs. flexbox vs. flex
  44. How to display 3 items per row in flexbox?
  45. -webkit-margin adds unwanted margin on texts
  46. Why isn’t my justify-content property working?
  47. What exactly flex-basis property sets?
  48. Use justify-content: flex-end and to have vertical scrollbar
  49. How to control number of items per row using media queries in Flexbox?
  50. What is the difference between `margin` and `padding` in CSS?

Leave a Comment