Problema con flex e position absolute

[fermat]

ciao!

ho la necessità di mettere un div al bottom del parent.
e di usare flex al suo interno e centrare orizzontalmente gli elementi.

ho fatto cosi:

    <div class="menu_bottom">


      <div>
        <a class="btn btn-link btn_menu_link" href="/login">
          Login
        </a>
      </div>


      <div>
        <span>|</span>
      </div>
      
      <div>
        <a class="btn btn-link btn_menu_link" href="/login">
          Contatti
        </a>
      </div>


    </div>

questo il css:

.menu_bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
}


.menu_bottom > div {
  text-align: center;
}

in sostanza:

• se uso absolute si mette in fondo ma non si centra
• se non lo uso, si centra ma non è sul fondo

come posso fare secondo voi??

[KillerWorm]

Ciao, questo accade normalmente quando si applica il posizionamento assoluto ad un elemento nel quale non sono specificate le dimensioni. Tecnicamente è usato l'algoritmo shrink-to-fit (restringi per adattare) per cui le dimensioni dell'elemento (quale esso sia) vengono ridotte al minimo se non diversamente specificato.

Mantenendo il position:absolute potresti risolvere semplicemente impostando width:100% a .menu_bottom, se questo non implica altri problemi di sorta.

Prova e fai sapere.

[fermat]

risolto come dicevi tu!

.menu_bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  width: 100%;
}

grazie!