Why does ::first-letter stop working as soon as I add display: flex or inline-flex?

Question

I've implemented some ::first-letter styles for my p elements. However, when I add display: inline-flex to make them inline, all the ::first-letter styles stop working.

How can I make the elements inline while keeping the ::first-letter styles?

 p:first-of-type::first-letter {
    font-size: 25px;
    font-weight: bold;
 }

 p:nth-of-type(2)::first-letter {
    font-size: 25px;
    font-weight: bold;
 }

  p:nth-of-type(3)::first-letter {
    font-size: 25px;
    font-weight: bold;
 }

/* inline container */
p {                               
    display: inline-flex;
    width: 33%;
}

Answer 1

A flex container (that is, an element with display: flex or display: inline-flex) cannot contain a ::first-letter pseudo-element, since a flex container contains flex items, not formatted lines. That's why making your p elements flex containers disables all your ::first-letter rules.

This appears to be the classic case of using display: flex/inline-flex when you're not trying to create a flex layout within each element. For inline (or horizontal) layout of block containers, use display: inline-block, display: table-cell, or floats, instead.