Having an issue with the "max-width" property in CSS on my website. There is a title that is limited to one line and uses the following property for overflow:
text-overflow: ellipsis;
Everything works fine and the overflow behaves as expected, but when I apply a percentage to the max-width property, the title's div does not shrink.
CSS:
.card-content-title {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: 80%;
text-align: left;
font-family: $roboto-condensed-regular;
font-size: 18px;
color: $inactive-text-color;
margin-top: 13px;
margin-bottom: 0;
padding: 0;
}
HTML:
<div class="row">
<div class="card-menu">
<div class=" card-menu-item"></div>
<div class=" card-menu-item"></div>
<div class=" card-menu-item"></div>
<div class=" card-menu-item"></div>
</div>
<div class="card-content">
<div class="row">
<div class="card-content-title">(title here)</div>
</div>
</div>
Result:
Changing the max-width to pixels instead of percentages:
max-width: 200px
Result:
Is there a way to prevent overflow when using percentages?
EDIT: Here is the CSS for .row:
.row {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
padding: 5px;
width: 100%;
}