Créer un conteneur enfant plus large que le conteneur parent

Comment faire en sorte que le conteneur enfant déborde de son parent ?

Voici un CodePen dans lequel je teste différentes solutions souvent citées sur stackoverflow. Le but est de faire en sorte que la div enfant déborde et prenne toute la largeur de l’écran.

See the Pen
Full Width Containers in Limited Width Parents
by blogob (@yuyazz)
on CodePen.

La meilleur solution

La solution la plus pratique est la deuxième dans mon exemple :

margin: 0 -100%;
padding: 0 100%;

En appliquant ces valeurs à la div que l’on veut étendre, la mise en page est respectée au redimensionnement de la fenêtre. Il n’y donc rien de plus à faire pour le responsive. Tous les autres exemples requièrent l’application de media queries, et aussi la nécessité de définir une largeur pour le bloc intérieur.