Browser Cache TTL less than Edge Cache TTL

I just added the following page rule to my site.

Cache Level: Cache Everything
Edge Cache TTL: a month

After I saved it everything was working fine and the site was very fast. But after 4 hours my static files stopped caching and were re-loading with every page refresh. During this time the Status Code switched to 304 too.

It turned out to be that the “age” header (see image below) exceeded the “max-age” set in cache-control. I don’t see this issue on other sites using Cloudflare. For now I just extended the Browser Cache TTL to be a month as well, so age remains less than max-age and files are still cached. I assume that when the Edge Cache refreshes, the age will drop and everything will be fine again.

Does browser cache TTL have to be >= edge cache TTL? Why didn’t the browser cache save the file again after it expired. Below is an image of what my header looks like (after I increased Browser Cache TTL from 4 hours to 1 month).

Any help/explanation would be appreciated!