the Media Object + List Group

index.html

<div class="media">

    <div class="media__img">
        <img src="http://placehold.it/64x64" alt="">
    </div>

    <div class="media__body">
        
        <h2 class="media__body__title">Subject</h2>
        
        <p class="media__body__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, vero minus perferendis ex deserunt dolorum tenetur laboriosam </p>

        <!-- // List Group, inner -->
        <ul class="list-group">
            
            <li class="list-group__item list-group__item--inline">
               
                <!-- // Media Object, Inner 1 -->
                <div class="media">
                    <div class="media__img">
                        <img src="http://placehold.it/24x24" alt="">
                    </div>
                    <div class="media__body">
                        <p class="media__body__text">Item-1</p>
                    </div>
                </div><!-- end media object inner 1 -->

            </li>
           
            <li class="list-group__item list-group__item--inline">
               
               <!-- // Media Object, Inner 2 -->
                <div class="media">
                    <div class="media__img">
                        <img src="http://placehold.it/24x24" alt="">
                    </div>
                    <div class="media__body">
                        <p class="media__body__text">Item-2</p>
                    </div>
                </div><!-- end media object inner 2 -->

            </li>

            <li class="list-group__item list-group__item--inline">

                <!-- // Media Object, Inner 3 -->
                <div class="media">
                    <div class="media__img">
                        <img src="http://placehold.it/24x24" alt="">
                    </div>
                    <div class="media__body">
                        <p class="media__body__text">Item-3</p>
                    </div>
                </div>

            </li>

        </ul><!-- end list group inner -->
    
    </div><!-- end media body outer -->

</div><!-- end media outer -->

style.scss

@import "compass/css3";
// CLEARFIX, contain floats
@mixin clearfix {
    *zoom : 1;
    
    &:before,
    &:after {
        display: table;
        content : ""; 
    }
    
    &:after {
        clear : both; 
    } 
}

.clearfix {
    @include clearfix; 
}

// List Group CSS
.list-group {
   padding: 0;
	display: block;
   list-style-type: none;
}
    .list-group__item {
    	display: block;
    }

    .list-group__item--inline {
    	display: inline-block;
    }

    /* In case custom bullets are used */
    .list-group__item::before {
    	content: none;
    }

// Media Object CSS
.media {
	overflow: hidden;
}

    .media__img {
       margin: 0 10px 0 0;
    	float: left;
    }

    .media__img--reversed {
       margin: 0 0 0 10px;
    	float: right;
    }

    .media__img--stacked {
       margin: 0 0 10px;
    	float: none;
    }

    .media__body {
       overflow: hidden;
    }

        .media__body__title {
           margin: 0;
           font-size: 1rem;
           font-weight: bold;
        }

		.media__body__title {
			margin: 0;
		}

		.media__body__text {
			margin: 0;
		}

the-Media-Object-+-List-Group-.markdown

the Media Object + List Group

This current code is causing the media_body_text on the inner list-group media objects to truncate. Why?

A Pen by Josh Von on CodePen.

License.