How to keep flex children as inline elements?

Question

I use border-bottom to style multi-line links:

div {
  display: inline-block;
  width: 100px;
  padding: 20px;
  background-color: #ddd;
}

a {
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 0, 255, 0.5);
}

<div>
  <a href="#">StackOverflow is awesome</a>
</div>

For this to work, the <a> needs to be an inline element.

If the <a> appears to be a block-level element, the border is drawn only at the bottom:

And, this is exactly what is happening when the <a> is a child of a flexbox:

div {
  display: inline-flex;
  width: 100px;
  padding: 20px;
  background-color: #ddd;
}

a {
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 0, 255, 0.5);
}

<div>
  <a href="#">StackOverflow is awesome</a>
</div>

Looks like, the children of a flex parent are automatically treated as block-level elements.

Is there a way to keep flex children as inline elements?

What is actually you want ? can you please add expected output for this? — Rayees AC, Sep 04 '20 at 04:56
Does this answer your question? [Make flex children inline-block](https://stackoverflow.com/questions/47319794/make-flex-children-inline-block) — Rayees AC, Sep 04 '20 at 05:01
Maybe use [this](https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-decoration-color)? — Asaf, Sep 04 '20 at 05:03
@RayeesAC I want to be able to use the `border-bottom` styling for multi-line links regardless of the context they are placed in. In the example above, when the link is placed in a flex context, styling breaks. — Misha Moroshko, Sep 04 '20 at 05:13
@AsafS. I'd like to be able to control the thickness of the underline. Unfortunately, `text-decoration-thickness` doesn't have a good browser support yet. — Misha Moroshko, Sep 04 '20 at 05:15
https://css-tricks.com/a-css-only-animated-wrapping-underline/ — Paulie_D, Sep 04 '20 at 05:33
@Paulie_D Their approach breaks if the parent div has `display: inline-flex`. This is the whole point of this question :) — Misha Moroshko, Sep 04 '20 at 06:42
adding an extra wrapper to play the role of the *inline* element is your only solution — Temani Afif, Sep 04 '20 at 07:26

score 1 · Accepted Answer · answered Sep 04 '20 at 05:49

just add span to your text and style to it

div {
  display: inline-flex;
  width: 100px;
  padding: 20px;
  background-color: #ddd;
}
span {
  padding-bottom: 5px;
  border-bottom: 2px solid rgba(255, 0, 255, 0.5);
  line-height: 30px;
}
a {
  text-decoration: none;
}

<div>
  <a href="#"><span>StackOverflow is awesome</span></a>
</div>

score -1 · Answer 2 · answered Sep 04 '20 at 07:21

i think rather than making a tag inline you can just add white-space:nowrap and width:auto will fix your issue, as white space will never broke your text to new line

div {
  display: inline-flex;
  width: auto;
  padding: 20px;
  background-color: #ddd;
}

a {
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid rgba(255, 0, 255, 0.5);
}

<div>
  <a href="#">StackOverflow is awesome</a>
</div>

How to keep flex children as inline elements?

2 Answers2