JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
<div>du texte pour combler</div>
<div id="truclarge">
    <div id="truclargecontent">contenu megalarge</div>
</div>
<div>du contenu en dessous pour combler aussi</div>
</div>

Donc pas de position:relative sur le #main, ni sur le #truclarge afin de pouvoir gérer ça correctement

CSS

#main {
    width:100px; 
    background:green;
    margin:0 auto;
}

#truclarge {
    background:blue;
    min-height:60px;
}

#truclargecontent {
    position:absolute;
    left:0;
    right:0;
    background:red;
    height:50px;
}