What is causing Flexbox to shrink text in Chrome?

I have recently started learning Flexbox, Grid Layout, and exploring other newer features. Responsive and/or mobile first design is also somewhat new to me, so I wanted to try building something real. So, I started building a small personal website to try it all out. My intent is to use display: flex; for my main navigation and then use display: grid; in my content area to sort various content "cards."

I am primarily using Chrome's device emulator for testing.

I put together all my markup for my first test page. Then, I began applying styles beginning at the top of the page. I didn't get far before I began styling the navigation, and my first step was to apply display: flex; to the <ul> that contains my navigation links.

As soon as display: flex; is added, the text inside each <li> becomes tiny - so small that I cannot read it on my desktop. I want the text to remain the same size as it was before display: flex; is applied (and have the ability to change it with other styles if necessary).

The original text size is correctly restored if display: flex; is removed, but then my navigation is no longer horizontal. Likewise, I am aware that there are other ways to achieve the horizontal navigation I am working on. I specifically chose Flexbox as an educational experience for myself.

I have been experimenting for a few days trying to find a solution. Here is what I have learned:

The document is correct when...

1. It is viewed in the latest version of Firefox and Edge.
2. It is viewed in a Chrome window that has been resized manually (instead of using the device emulator).

The navigation is tiny when...

1. It is viewed in the latest version of Chrome using the device emulator.
2. It is viewed in the latest version of Chrome on a real Android device. I tested on a Samsung Galaxy S5.

While testing for a solution, I decided to apply normalize.css to the document to see if a default browser style might be the cause. Unfortunately, it does not solve the problem, but it creates a different situation (again, in Chrome only) that might be considered a step in the right direction.

When normalize.css is applied, everything on the page becomes tiny. It's far too small to read, but it's all a consistent size - which is what I want...this size is just too small in Chrome.

I decided to comment out portions of normalize.css to pin point what was causing the change. I lucked out: it was one of the first declarations: html {-webkit-text-size-adjust: 100%;}. That one rule reduces the size of every element on the page to be tiny, but only in Chrome (and I assume Safari, but I cannot easily test that).

And then it got stranger: removing parts of the HTML will cause the same problem.

Everything on the page is tiny in Chrome when...

1. -webkit-text-size-adjust: 100%; is applied to html or body.
2. Some HTML elements are removed. It does not appear to be a certain element. I have encountered the problem after removing <h1>, <h2>, <ul>, <li>, and <p>.

One less-than-ideal solution is to take advantage of the -webkit-text-size-adjust property and increase the size of the text only in the navigation. For example, #banner li {-webkit-text-size-adjust: 300%;}.

There are two downsides to this approach, and both may be solvable if I learn a little more. First, I don't know what percentage I need to accurately resize the text. I used 300% as a guess, and it looks about right. Second, I do not really understand what the -webkit-text-size-adjust property does, so I do not know what other problems using it may cause.

Here are a few other things I have learned...

1. I checked the HTML and CSS for errors. Both validate.
2. Changing the font size or units does not make any difference.
3. Changing the height of the <li> flex items does not adjust the size of the text; it only changes the height of the box.
4. Flexbox alignment still works properly.
5. I was able to recreate the same problem using a new document.

I created a document to specifically debug this problem. The code is below. My real page is almost identical except that there are more <section> tags and content at the bottom. Removing anything inside the <section> tags other than <header> tags will cause everything to become tiny. I have removed almost every element possible. The CSS is shown in a <style> tag at the top of the document for simplicity.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flexbox Error Example</title>

<style type="text/css">
    body { font: 100%/1.5 Arial, sans-serif; }

    #banner ul {
        display: flex;
        justify-content: space-between;
        list-style: none;
        /*-webkit-text-size-adjust: 300%; */
    }
</style>
</head>
<body>
<header id="banner">
    <span>Logo Placeholder</span>
    <nav>
        <ul>
            <li><a href="Test1.html">Link 1</a></li>
            <li><a href="Test2.html">Link 2</a></li>
            <li><a href="Test3.html">Link 3</a></li>
            <li><a href="Test4.html">Link 4</a></li>
        </ul>
    </nav>
</header>
<div>
    <section>
        <header>
            <h1>Heading 1</h1>
        </header>
        <ul>
            <li><a href="List1.html">List 1</a></li>
            <li><a href="List2.html">List 2</a></li>
            <li><a href="List3.html">List 3</a></li>
        </ul>
    </section>
    <section>
        <header>
            <h2>Heading 2</h2>
        </header>
        <ul>
            <li>List 4</li>
            <li>List 5</li>
            <li>List 6</li>
        </ul>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempor varius erat. Nulla rutrum nisl sit amet massa volutpat lacinia. Ut venenatis cursus mi vel lacinia.</p>
    </section>
</div>
</body>
</html>

Lastly, here is an image that shows the 3 different states of the page:device emulator screenshots

I am at a loss on this one. I've tried everything I know to do, spend tons of time researching, and ask some developer friends who could also not tell me what is going on.