キャプションにテキストの折り返しがあるように、2つのdivの下に画像があるキャプションを取得するにはどうすればよいですか？

私はイメージを表示しているアプリケーションを持っています。一つは大きいイメージ、もう一つは小さなイメージです。（本質的に2列なので）私はobject-fitを使用しています：左側の大きな画像のためのカバーなので、このdivの幅は分かりません。右は私が幅を知っています、私はそれを固定幅にします。キャプションにテキストの折り返しがあるように、2つのdivの下に画像があるキャプションを取得するにはどうすればよいですか？

<div class="browseCardBody"> 
    <div class="browseCardImageLarge"> 
    <img src="https://i.imgsafe.org/4242b5ed94.jpg"> 
    </div> 
    <div class="browseCardSmallImages"> 
    <div style="width:133px"> 
    <div class="browseCardImageSmall"> 
    <!-- This main image scales to 300px high, varying width, how do get the text under it to match the width of this plus the fixed width div beside it?? --> 
    <img src="http://i.imgur.com/obwbqDT.jpg" /> 
    <img src="https://steemitimages.com/300x300/https://ipfs.io/ipfs/QmZ42wQdhPwjmhvkmQWbRRuCy1KWM2Ss95Njm5mGJijq6E/20170121_160538.jpg" /> 
    <img src="https://steemitimages.com/300x300/http://i.imgur.com/Oe9Yshv.jpg" /> 
    </div> 
    </div> 
</div> 

</div> 
<div> 
    <div class="browseCardFooter" ng-if="story.body.length > 0"> 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
    </div> 
</div>

HERE CSS：

.browseCardBody { 
    display: flex; 
    max-height: 300px; 
} 
.browseCardBottom li { 
    border-right: 1px solid rgba(0,0,0,.1); 
    float: left; 
    vertical-align: middle; 
    font-size: 16px; 
    padding: 6px; 
} 
.browseCardImageLarge { 
    object-fit: contain; 
    flex-grow: 0; 
    order: 1; 
} 
.browseCardImageLarge img 
{ 
    height: 300px; 
    object-fit: cover; 
} 
.browseCardSmallImages { 
    overflow: hidden; 
    flex-grow: 10; 
    order: 2; 
    height: 300px; 
} 
.browseCardImageSmall { 
    object-fit: cover; 
    display:inline-block;  
} 
.browseCardImageSmall img { 
    height: 100px; 
    object-fit: cover; 
    width: 133px; 
    vertical-align: bottom; 
}

私は容器全体を広くすることなく、幅と一致した画像のこれら二つの列の下のテキストブロックを作成する必要があります。

私のテキストは、divより長い場合、常にコンテナを広げます。divの幅を知らずにこれをどうやって防ぐのですか？ここ

私jsfiddleは、問題を示しています https://jsfiddle.net/tseqjc72/

出典

2017-01-22 Unipsycho