Flexbox text cutting off/not wrapping

Question

I'm using flexbox to display a blockquote and author/avatar horizontal to each other. This is within a slideshow (flexslider) but that doesn't seem to be the reason for the problem.

This works ok until we hit IE10. It appears to work fine in Chrome, Firefox, Opera, Safari, Edge and IE11.

The problem I'm having is the text is cut off at the end of the quote. If you don't see this at first you may have to resize your viewport. This may be caused by the padding I have at each side of the text to allow space for the custom open/close quotation marks.

Another issue in IE10 is that when the text is long (see "James Hetfield Longname" on the first quote) it doesn't wrap. This could be related to my other issue as I guess the text isn't wrapping correctly then either.

Here's some links to an example. I've include a CodePen and also a stripped back version of my HTML template.

CodePen: http://codepen.io/moy/pen/XdLELV Template: http://moymadethis.com/flex/quote.html

Really hope someone can help with this!

Here's the code, as it's making my add something (though I don't think this wall off CSS/HTML is particually helpful myself)!

EDIT: I should add that I use Autoprefixer to popular the extra flex prefixes.

HTML:

<div class="flexslider">
    <ul class="slides">
        <li>
            <blockquote class="feature-quote">
                <p class="feature-quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                <footer class="feature-quote__cite">
                    <img src="img/temp/avatars/avatar-james.jpg" class="feature-quote__avatar" />
                    <p><strong class="name">James Hetfield Hetfield</strong> Damage Inc.</p>
                </footer>
            </blockquote>
        </li>
        <li>
            <blockquote class="feature-quote">
                <p class="feature-quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                <footer class="feature-quote__cite">
                    <img src="img/temp/avatars/avatar-james.jpg" class="feature-quote__avatar" />
                    <p><strong class="name">James Hetfield</strong> Damage Inc.</p>
                </footer>
            </blockquote>
        </li>
        <li>
            <blockquote class="feature-quote">
                <p class="feature-quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                <footer class="feature-quote__cite">
                    <img src="img/temp/avatars/avatar-james.jpg" class="feature-quote__avatar" />
                    <p><strong class="name">James Hetfield</strong> Damage Inc.</p>
                </footer>
            </blockquote>
        </li>
    </ul>
</div>

CSS:

/* Base blockquote styles */

blockquote {
    margin-bottom: $baseline*2;
    overflow: hidden;   // Fixes bug when inside flexslider when open/close quote-marks duplicate.
    padding: $baseline $baseline 0 0;

    p {
        margin-bottom: $baseline/2;
    }

    > p {
        color: $blue-light;
        @include font-size(25);
        line-height: $baselineheight/1.25;
        font-weight: 300;
        padding-left: 30px;
        -webkit-font-smoothing: antialiased;

        &:before,
        &:after {
            background: url(../img/content/quote-open.png) no-repeat 0 0;
            content: "";
            display: inline-block;
            height: 24px;
            margin: 0 10px 0 -30px;
            position: relative;
            top: -5px;
            width: 21px;
        }

        &:after {
            background: url(../img/content/quote-close.png) no-repeat 0 0;
            margin: 5px 0 0 5px;
            position: absolute;
            top: auto;
        }
    }

    footer {
        padding-left: 30px;
    }

    .name {
        color: $blue;
        display: block;
        text-transform: uppercase;
    }
}


/* Feature (avatar) quotes */

.feature-quote {
    margin-bottom: $baseline;
    padding-top: 5px;
}

.feature-quote footer p {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}

.feature-quote__cite {
    margin-top: $baseline;
}

.feature-quote__avatar {
    border: 5px solid $blue-lighter;
    border-radius: 100%;
    display: inline-block;
    height: 60px;
    margin-right: $baseline/2;
    width: 60px;
}


/* Above 768px (Feature quote side-by-side */

@media only screen and (min-width: 768px) {

    blockquote {
        margin: 0 25px $baseline*2;
    }

    .feature-quote {
        display: flex;
    }

    .feature-quote__text {
        order: 2;
        width: 66.66666%;
    }

    .feature-quote__cite {
        display: flex;
        align-items: center;
        justify-content: center;
        order: 1;
        margin-top: 0;
        padding-right: 30px;
        width: 33.33333%;
    }

    .feature-quote__avatar {
        height: 80px;
        width: 80px;
    }

    .no-flexbox {

        .feature-quote {
            margin: 0 auto $baseline;
            max-width: 800px;
        }

        .feature-quote__text,
        .feature-quote__cite {
            text-align: center;
            width: 100%;
        }

        .feature-quote__cite {

            p {
                text-align: left;
            }
        }
    }
}

I've noticed applying `flex: 0 1 auto;` to `.feature-quote__text` seems to make the text wrap correctly ...though applying the same to the `.feature-quote__cite` doesn't have the same effect, it still overflows into the next column :/ — user1406440, May 20 '16 at 11:50

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

1

Expanding upon Pete's comment about IE10 not properly supporting flexbox.

http://caniuse.com/#search=flex

Regarding IE10:

Only supports the 2012 syntax

Need the -ms- prefix

This answer actually has lots of information about flex in IE10: https://stackoverflow.com/a/21306343/2117156

edited Jun 20 '20 at 09:12

Community

1
1

answered May 20 '16 at 10:49

Jamie Barker

8,145
3
29
64

Thanks for the reply. Yeah I should of added I use autopreflixer so the relevant prefixes are added when the CSS is compiled. If you check the template version you'll see `display: -ms-flexbox`. – user1406440 May 20 '16 at 11:05

score 1 · Accepted Answer · answered May 24 '16 at 08:12

Note I'm using autoprefixer so all -ms- prefixes are generated automatically. I will just note the prefix-less declarations here.

Adding the following line onto the paragraph did the trick flex: 0 1 auto;

I also had an issue where the text wouldn't wrap in the .feature-quote__cite container. I tried adding the above which didn't work. To fix this I had to add flex: 0 1 auto; directly onto the paragraph within rather than on the parent container .feature-quote__cite. Not ideal but it looks like it's done the trick.

As an aside, in IE11 the avatar image would get squashed when there wasn't enough horizontal space. I found adding flex-shrink: 0; to the image fixed this.

Flexbox text cutting off/not wrapping

2 Answers2