Weird wrapping of text and anchor element in flex container - html

Question

I have a simple block of text sharing a display: flex container with an <a> tag.
Unfortunately, the wrapping is a bit weird, almost as if the <a> tag's "true" width isn't being treated as such, or like it has a width of 0 (judging by how it is positioned).
Is there some styling I can apply to <a> tags to make it act more "text-like"?
JSFiddle
body {
font-size: 32px;
}
body > .container {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
}
body > .container > .foot {
flex: 1 0 100%;
background-color: grey;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
body > .container > .foot > .content {
flex: 1 0 70%;
width: 50%;
height: 350px;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;
align-content: center;
text-align: center;
}
<div class='container'>
<div class='foot'>
<div class='content'>
We'll be back up shortly. We are undergoing a scheduled maintenance. Apologies for the inconvenience. Check <a href='http://status.mywebsite.com'>http://status.mywebsite.com </a> for updates.
</div>
</div>
</div>

Answer 1

Answer
You have text-align: center which is applying to the text, but not the anchor element.
You have justify-content: flex-start which is applying to the anchor element, but not the text.
All you need is a switch to justify-content: center.
revised fiddle
body {
font-size: 32px;
}
body > .container {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
}
body > .container > .foot {
flex: 1 0 100%;
background-color: grey;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
body > .container > .foot > .content {
flex: 1 0 70%;
width: 50%;
height: 350px;
display: flex;
flex-flow: row wrap;
justify-content: center; /* ADJUSTED */
align-items: center;
align-content: center;
text-align: center;
}
<div class='container'>
<div class='foot'>
<div class='content'>
We'll be back up shortly. We are undergoing a scheduled maintenance. Apologies for the inconvenience. Check <a href='http://status.mywebsite.com'>http://status.mywebsite.com </a> for updates.
</div>
</div>
</div>
Explanation
You wrote:
I have a simple block of text sharing a display: flex container with an <a> tag.
Well, your block of text isn't as simple as you might think.
You're not dealing with a single string.
What you actually have is a flex container with three flex items:
An anonymous flex item wrapping the text before the anchor element
The anchor element
An anonymous flex item wrapping the text after the anchor element
From the spec:
4. Flex Items
Each in-flow child of a flex container becomes a flex item, and each
contiguous run of text that is directly contained inside a flex
container is wrapped in an anonymous flex item.
The behavior you're seeing is three flex items wrapping.
The anchor text itself will not wrap because it is equivalent to a single word. But if you add spaces and text in the anchor it will wrap like everything else.
Also see this post:
Why do I need "text-align: center" when the container has "justify-content: center"?