Set max-width of element based on sibling using flexbox - html

Question

I'm working on a layout for a thumbnails component which contains an image and text element. The images have a height: 100px; and auto width, while the text should span up to the width of the image width and the overflow should be hidden.
<div>
<img src="...">
<span>a bunch of text that should be cut off</span>
</div>
I've tried accomplishing this using flexbox but I can't get the text width to be equal to the image width. Instead, the text just grows 100% and stretches out the image.
See my jsbin

Answer 1

You need to specify container's width -> so that your text box knows it's width.
You need tell text to not wrap.
You need to hide the overflowing text.
You need ellipsis for overflowing text.
Following code works:
.main {
border: 1px solid red;
display: flex;
flex-wrap: wrap;
width: 50%; // px would also work
}
.main img {
height: 100px;
flex: 0 0 100%;
}
.main div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="main">
<img src="http://i.imgur.com/uiGur1h.jpg" alt="">
<div>Text go here </div>
</div>
<div class="main">
<img src="http://i.imgur.com/uiGur1h.jpg" alt="">
<div>Text would go here but would be cut off if it's very long </div>
</div>
Refer example in https://developer.mozilla.org/en/docs/Web/CSS/text-overflow