0

I want to center one div horizontally while keeping another one in the left, as shown in the image below:

div A on the left and div B centered

I managed to obtain the desired layout, shown above, by mixing a flexbox approach (to center the B div) while also using position: absolute; left: 20px on div A (and setting the parent container to position: relative), but I don't like using position: absolute, feels like ancient styling.

How to do this with pure flexbox, without position tricks?

Note that the sizes of the inner divs (A) and (B) are not known a priori and ideally the width of the divs should fit to content (as shown above).

Pedro A
  • 3,989
  • 3
  • 32
  • 56
  • 1
    all the possible way including position:absolute are within the duplicate. By the way there is no clean way to do this, all are hacks (only the grid one is not a hack) – Temani Afif Feb 27 '19 at 23:08
  • @TemaniAfif - I see, thank you very much! Sorry for asking a duplicate. I tried to search but didn't find anything. I guess my bad luck was that the duplicate involved "right" instead of "left". – Pedro A Feb 27 '19 at 23:12

0 Answers0