I have a class with the property display: flex. When I go to Chrome dev tools, it shows display: block, because of user-agent style sheet:

I had a very similar problem. Chrome dev tools showed me that my flex-direction: row; was inactive with the info:

The display: block property prevents flex-direction from having an effect.
Try setting the display: block property to display: flex.

I searched every single <div in my html and added class="TODO" to each div, then I set the CSS .TODO class to display: flex but nothing worked. This was a useful debugging exercise. The problem was that my:

#forecast {
    flex-direction: row;
    height: 100%;
}

was missing the display: flex; so flex-direction was inactive. Once I added display: flex everything started working (dumb mistake). The debugging process was useful and the TODO classes were easy to find and back out of the code once it was fixed. This process might help others looking to find this source of this type of bug. Working solution shown below.

#forecast {
    display: flex;
    flex-direction: row;
    height: 100%;
}