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:


    
        
            
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
                
                    
                    James Hetfield Hetfield Damage Inc.
                
            
        
        
            
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
                
                    
                    James Hetfield Damage Inc.
                
            
        
        
            
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
                
                    
                    James Hetfield Damage Inc.

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;
            }
        }
    }
}

user1406440 · Accepted Answer

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

Answers (2)

Related Questions