Flexbox justify-content:space-between doesn't work properly with position:absolute

I'm facing this issue: I'm looking to use position:absolute, to adjust the span.materias__item-detalle, to bottom of the div, without caring the size that the h4 occupes. But, I also want to use flexbox justify-content:space-between to give them a disposition. I tried it with display:flex and display:inline-flex

Would you mind help me? Thanks!

[problem][1] [1]: https://i.sstatic.net/9VwqUIKN.png

Here the code:

#materias_container {
  padding: 2rem;
  background-color: rgb(63, 71, 204);

  #materias_lista {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    li {
      list-style: none;

      div.materias__item {
        width: 390px;
        height: 220px;
        font-size: 20px;
        border-radius: 12px;
        border: 5px solid rgb(1, 74, 23);
        background-color: rgb(35, 177, 77);
        box-shadow: 6px 6px 6px black;
        padding: 20px;
        margin: 10px;
        position: relative;

        h4 {
          margin-top: 10px;
        }

        span.estado_promocionada,
        span.estado_cursando,
        span.estado_pendiente {
          display: block;
          width: fit-content;
          padding: 5px;
          border-radius: 15px;
          display: grid;
          justify-self: flex-end;
          border: 2px solid black;
        }

        span.estado_promocionada {
          background-color: rgb(0, 251, 96);
        }

        span.estado_cursando {
          background-color: rgb(229, 255, 0);
        }

        span.estado_pendiente {
          background-color: rgb(89, 90, 89);
        }

        .materias__item-detalle {
          width: 100%;
          display: inline-flex;
          justify-content: space-between;
          align-items: center;
          position: absolute;
          bottom: 4%;
        }
      }
    }
  }
}

<div id="materias_container">
   <ul id="materias_lista">
      <li>
         <div class="materias__item">
            <span class="estado_promocionada">Promocionada</span>
            <h4>Técnicas de Programación</h4>
            <p class="materias__item-detalle">
               <span>
                  Código: <!-- -->1.1.1
               </span>
            </p>
         </div>
      </li>
      <li>
         <div class="materias__item">
            <span class="estado_promocionada">Promocionada</span>
            <h4>Elementos de Análisis Matemático</h4>
            <p class="materias__item-detalle">
               <span>
                  Código: <!-- -->1.1.2
               </span>
               <span>📚 Apuntes</span>
            </p>
         </div>
      </li>
   </ul>
</div>

Solution

width: 100% simply makes your absolute positioned paragraph too wide, because the container it is positioned in has padding.

Remove the width, and let the element get the necessary width by positioning it at left: 20px; right: 20px (corresponding to the container padding) instead.

#materias_container {
  padding: 2rem;
  background-color: rgb(63, 71, 204);

  #materias_lista {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    li {
      list-style: none;

      div.materias__item {
        width: 390px;
        height: 220px;
        font-size: 20px;
        border-radius: 12px;
        border: 5px solid rgb(1, 74, 23);
        background-color: rgb(35, 177, 77);
        box-shadow: 6px 6px 6px black;
        padding: 20px;
        margin: 10px;
        position: relative;

        h4 {
          margin-top: 10px;
        }

        span.estado_promocionada,
        span.estado_cursando,
        span.estado_pendiente {
          display: block;
          width: fit-content;
          padding: 5px;
          border-radius: 15px;
          display: grid;
          justify-self: flex-end;
          border: 2px solid black;
        }

        span.estado_promocionada {
          background-color: rgb(0, 251, 96);
        }

        span.estado_cursando {
          background-color: rgb(229, 255, 0);
        }

        span.estado_pendiente {
          background-color: rgb(89, 90, 89);
        }

        .materias__item-detalle {
          /*width: 100%;*/
          display: inline-flex;
          justify-content: space-between;
          align-items: center;
          position: absolute;
          bottom: 4%;
          left: 20px;
          right: 20px;
        }
      }
    }
  }
}

<div id="materias_container">
   <ul id="materias_lista">
      <li>
         <div class="materias__item">
            <span class="estado_promocionada">Promocionada</span>
            <h4>Técnicas de Programación</h4>
            <p class="materias__item-detalle">
               <span>
                  Código: <!-- -->1.1.1
               </span>
            </p>
         </div>
      </li>
      <li>
         <div class="materias__item">
            <span class="estado_promocionada">Promocionada</span>
            <h4>Elementos de Análisis Matemático</h4>
            <p class="materias__item-detalle">
               <span>
                  Código: <!-- -->1.1.2
               </span>
               <span>📚 Apuntes</span>
            </p>
         </div>
      </li>
   </ul>
</div>