¿Por qué el porcentaje de relleno rompe mi artículo flexible?

Tengo elemento

    que es un elemento flexible. Este elemento

      contiene varios elementos

    • que no son elementos flexibles. Cuando agrego porcentajes de relleno a los elementos
    • , entonces el elemento
        se divide en varias líneas como en la foto: introduzca la descripción de la imagen aquí

        Cuando configuro rellenos fijos (como 30px) el elemento

          se muestra en una línea: introduzca la descripción de la imagen aquí

          Entonces, mi pregunta es: ¿Por qué los rellenos porcentuales hacen que