using display flex causes purple border to appear

Question

I have the following simple HTML structure:

<section id="teasers">
        <div class="wrapper">
            <a href="">
                <div class="redbox">
                    <h2 class="two-lines uppercaseme lowercaseme">Behind the Scenes<br/>
                        <span class="lowercaseme">A look at studio life</span>
                    </h2> 
                    <div class="clearfix"></div>
               </div>
           </a>
       </div>
</section>

And the following CSS applied:

.redbox {
    padding: 0 55px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#teasers h2 {
    float: left;
    margin: 7% 0;
}

The bug can be seem HERE. If you reduce the screen size to below 992px.

Basically, applying flex causes the H2 tag inside .redbox to have a purple border. If you remove display: flex in the dev tools the purple border vanishes. How come?

Is this a known issue and what is the solution to this?

The CSS you provided is inside a media query with max-width of 992px. Is this intended? — Voreny, Jan 29 '16 at 14:57
Its `text-decoration` form `a` but i am not sure why its showing on `display: flex` and not on `display: table` or `display: inline-block` for example. — Nenad Vracar, Jan 29 '16 at 14:58

score 2 · Answer 1 · answered Jan 29 '16 at 15:02

2

Not sure on the flex piece as to why it shows but as it is a link if you text-decoration : none; this will take off the underline.

answered Jan 29 '16 at 15:02

Jamie Paterson

426
3
10

wellagain · Accepted Answer · 2016-01-29T16:14:04.527

2

The underline is indeed the text-decoration from your block-level link (the wrapping a), and it should be there.

It's about floats, not flex. Floats are hiding your underline. And since floats are ignored with flex, the underline reappears. If you remove float: left from your H2 on a screen larger than 992px (container is block, not flex there), you'll see that underline again.

The question is why the underline disappears when floated? It must be related to elements being taken out of the normal flow (much like with absolute positioning): https://jsfiddle.net/b5jagc1m/

edited Jan 29 '16 at 16:14

answered Jan 29 '16 at 15:25

wellagain

409
5
11

1

It disappears when floated because the parent collapses since the floated child is not cleared. – Michael Benjamin Jan 29 '16 at 16:08

score 2 · Answer 3 · edited May 23 '17 at 11:44

You're bumping up against the User Agent Stylesheet.

Since you've wrapped the h2 in an anchor element, the whole thing is a link. As you may know, visited links by default turn purple.

If you want the underline to be a different color, make an adjustment to your visited links rule:

a:visited { color: red; }

DEMO

Otherwise, simply remove the underline:

a { text-decoration: none; }

DEMO

But why does the underline disappear when display: flex is removed?

Because a child of the flex container is floated. This means that when the container is on, the float is ignored. Per the rules of CSS, flexbox ignores floats on children:

3. Flex Containers: the flex and inline-flex display values

float and clear have no effect on a flex item, and do not take it out-of-flow.

But when the flex container is deactivated, a inline formatting context resumes, and the a element collapses because the floated child is not cleared. (The clearfix div in your code is invalid and doesn't work.) This takes the underlines with it, but not the text as it exists within block elements.

References:

using display flex causes purple border to appear

3 Answers3