The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Flexbox and padding problem

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #180008
    Mikko Laine

    Can someone explain why this happens:
    I don’t wanna use those extra elements to get it working.

    2 elements with display: flex (lets call them X and Y for some reason…)
    Element X has 2 children with flex: 1
    So its 50% and 50%
    Element Y has 3 elements. first child has flex: 6, second child has flex: 4 and third child flex: 2
    So the first child should be 50% and the 2nd and 3rd child should add up to 50%

    That works.

    When padding/border is added to the flex-items, it changes the element Y child sizes.
    the 1st child is less than 50%

    box-sizing doesn’t work.

    The only thing I came up was that I should add display: flex to the flex-items and give children with flex: 1 to those.

    Is there something I’m missing or is that really the way to do that?

    Mikko Laine

    … The problem isn’t that I can’t get it to work (text nodes are there just to show the items)
    And without the use of display: flex on the parent of that p (and flex: 1 on p) it doesn’t work (try adding more text on one of the p elements)

    The point was… why does flex element sizes change when padding is added? (even with box-sizing)

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.