Weird wrapping of text and anchor element in flex container

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>&nbsp; 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>&nbsp; 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"?