flexbox adding newline to clipboard

Question

I'm working with a layout that uses flexbox. Works good so far but I have a problem with copying text to clipboard.

Apparently, using flexbox seems to add a newline character after each child node

It can be seen in the demo below, copying text "LabelMessage" works normally (paste it and it remains one-line). But if you add display:flex to container a newline is added after "Label" upon copying to clipboard

What is causing this? Is there any way around it?

Fiddle: http://jsfiddle.net/zv4mamtm/

$('.toggleFlex').on('click', function() {
  $('.container').toggleClass('flex')
})

.container.flex {
  display: flex;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="toggleFlex">toggle</span>
<hr>
<div class="container">
  <span class="label">Label</span>
  <span class="label">Message</span>
</div>
<hr>
<textarea></textarea>

Answer 1

I think this is due to computed style of your elements. When you don't set flex your span are inline element:

But when you set display:flex they become block element:

Visually you will see them in one line due to the flex property but when doing copy/paste they are considered as block elements so there is a line break between them.

You may refer to the specification for more information

---

Unfortunately, I am not sure if there is a workaround to avoid this as we cannot control the computed styles in some cases even if we force it using !important.

.container{
    display: flex;
    color: red;
}
span {
  display:inline!important; /*will have no effect*/
}

<div class="container">
    <span class="label">Label</span>
    <span class="label">Message</span>
</div>

Answer 2

As specified in the previous answer and this post :

In a flex container the child elements ("flex items") are automatically "blockified" ( more details )

depending on your use case, using display: contents can be helpful if you only want to copy / paste text,

see : how display contents works

The easiest way to understand what happens when display: contents is used is to imagine the element’s opening and closing tags being omitted from the markup.

and from the specification :

For the purposes of box generation and layout, the element must be treated as if it had been replaced in the element tree by its contents

( you might want to check the compatibility of this as it won't work in IE and Edge )

$('.toggleFlex').on('click', function() {
  $('.container').toggleClass('flex')
})

.container.flex {
  display: flex;
  color: red;
}

.container.flex span {
  display: contents;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="toggleFlex">toggle</span>
<hr>
<div class="container">
  <span class="label">Label</span>
  <span class="label">Message</span>
</div>
<hr>
<textarea></textarea>

this will override the display:block of the span caused by th flex container :