Skip to main content

¿Como puedo hacer para que mi flex-container no afecte a un item-flex posicionado de forma absoluta?

<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.