I'm trying to get this
But instead, the text column expands to fill the whole width of its content and pushes the buttons column off the screen:
I'm trying to get a text column to truncate so that its parent row is the width of the page. This works fine if the div in question is a direct child of the flex row. However, if it's a child of a child, the text does not get hidden and makes the row wider than the width of the page.
Here's a jsfiddle demonstrating the issue: https://jsfiddle.net/2v4753L8/45/
And here's the code:
<div class='row'>
<div class='avatar'>Avatar</div>
<div class='details'>
<div>Title</div>
<div class='notes'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class='buttons'>
BUTTONS
</div>
</div>
.row {
display: flex;
}
.details {
margin-left: 50px;
margin-right: 50px;
}
.notes {
font-size: 14px;
font-style: italic;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.buttons {
margin-left: auto;
}
I can achieve the effect I'm looking for by adding a fixed width attribute to the notes class, but I'd like it to be dynamic based on the width of the page (while avoiding JS if at all possible).
Anyone know how to achieve this?
Thanks!
