JSFiddle - React, Tailwind, and code Playground

HTML

<div id="contenedor">
Div normal crece

<div class="normal">
    Crece a la derecha
<ul>
<li>Linea 1</li>
<li>Linea 1 Linea 2 </li>
<li>Linea 1 Linea 2 Linea 3 </li>
<li>Linea 1 Linea 2 Linea 3 Linea 4</li>
<li>Linea 1 Linea 2 Linea 3 Linea 4 Linea 5</li>
<li>Linea 1 Linea 2 Linea 3 Linea 4 Linea 5 Linea 6 </li>
<li>Linea 1 Linea 2 Linea 3 Linea 4 Linea 5 Linea 6 Linea 7 Linea 8 Linea 9 Linea 10</li>
<li>Linea 1 Linea 2 Linea 3 Linea 4 Linea 5 Linea 6 Linea 7 Linea 8 Linea 9 Linea 10 Linea 11 Linea 12 Linea 13 Linea 14 Linea 15 Linea 16 Linea 17 Linea 18 Linea 19 Linea 20</li>
</ul> 
</div>    
    
<div class="anormal">
    Crece a la izquierda
<ul>
<li>Linea 1</li>
<li>Linea 1 Linea 2 </li>
<li>Linea 1 Linea 2 Linea 3 </li>
<li>Linea 1 Linea 2 Linea 3 Linea 4</li>
<li>Linea 1 Linea 2 Linea 3 Linea 4 Linea 5</li>
<li>Linea 1 Linea 2 Linea 3 Linea 4 Linea 5 Linea 6 </li>
<li>Linea 1 Linea 2 Linea 3 Linea 4 Linea 5 Linea 6 Linea 7 Linea 8 Linea 9 Linea 10</li>
<li>Linea 1 Linea 2 Linea 3 Linea 4 Linea 5 Linea 6 Linea 7 Linea 8 Linea 9 Linea 10 Linea 11 Linea 12 Linea 13 Linea 14 Linea 15 Linea 16 Linea 17 Linea 18 Linea 19 Linea 20</li>
</ul> 
</div>


</div>

CSS

#contenedor{
background:#D5E5A5;
height:500px;
position:relative;
width:100%;
}


.normal{
    background:#B3A3C3;
    min-width:500px;
    position:absolute;
    top:50px;
    left:880px;
}
.anormal{
    background:#B4C4D4;
    /* min-width:500px;  */
    position:absolute;
    top:350px;
    right:10px;
}