<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div class="row" style="background: pink;">
<a style="position: relative">
<img src="http://lorempixel.com/50/50">
<p>Username</p>
<ul style="position: absolute">
<li>
item item item item item item
</li>
</ul>
</a>
</div>
</div>
¿No se supone que el <ul>
esta afuera del flujo y no tiene dimensiones definidas, debería ajustarse según su contenido es decir, seguirse estirando sin generar saltos de linea pero no lo hace y actúa como si tuviese un ancho definido?
¿Podrían explicarme esto?
¿Como puedo hacer para mandar mi enlace con position: relative
al final del contenedor y que a su vez la alineación no afecte a la lista? es decir aunque el contenedor flex sea justify-content: flex-end; la lista igual se estire sin generar saltos de linea a causa de su contenido?
Esto ocurre por el display: flex
que tiene la clase row
pero si la quito, todo marcha bien. pero no se como alinear mi enlace junto con la lista posicionada de forma absoluta al final del contenedor.