Today I Learned

Omit additional wrappers in CSS, display: contents;

In situation where you want to style elements like those were neighbours, but unfortunately two of them are in additional wrapper that you can’t get rid of:

<div class="flex">
  <div class="red-block"></div>
  <div class="wrapper">
    <div class="el">1</div>
    <div class="el">2</div>

and you want them to be inside flex and be placed by eg. space-between and this is the result:


Add display: contents; to the wrapper and problem is solved: image

display: contents makes the element to ignore itself in styling.

Browser support: image

Codepen: here