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>
</div>
</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:
display: contents
makes the element to ignore itself in styling.
Browser support:
Codepen: here
Tweet