This is is exactly the same as the previous example, except adds the responsive viewport meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

On a mobile device, you should see that this makes matters even worse because it causes the 100% blocks to be rendered at the devices default viewport width, which is probably substantially less than the viewport width the mobile device chose in the previous example that didn't specify the initial scale using the responsive viewport meta tag.

You can see the same weirdness if you resize this example using the Devices Toolbar in Chrome on a traditional screen.