Html “最大宽度”与“百分比”不匹配

我对css中的“最大宽度”属性有一个问题。 在我的网站中，有一个标题仅限于一行，并且在溢出时具有此属性：

text-overflow: ellipsis;

一切正常，溢出行为良好，但由于某种原因，当我在“最大宽度”属性中使用“百分比”时，它不会收缩标题的div

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">(here is the title)</div>
    </div>
</div>

结果：

<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">(here is the title)</div>
    </div>
</div>

当我使用百分比时，有没有办法避免溢出行为？

编辑： 有.row的css：

.row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 5px;
    width: 100%;
}

---

请检查下面的代码段，它有两个部分，一个是

50%最大宽度

，另一个是

200px最大宽度

注意：在您复制到此处的代码中，缺少关闭

div

.row{
显示：-网络工具包盒；
显示：-webkit flex；
显示器：-moz盒；
显示：-moz flex；
显示：-ms flexbox；
显示器：flex；
填充物：5px；
宽度：400px；
}
.卡片内容标题{
文本溢出：省略号；
空白：nowrap；
溢出：隐藏；
文本对齐：左对齐；
字体系列：$roboto浓缩常规字体；
字号：18px；
颜色：$非活动文本颜色；
边缘顶端：13px；
页边距底部：0；
填充：0；
}
.card-content-title-1{
最大宽度：50%；
}
.card-content-title-2{
最大宽度：200px；
}

（这里是标题这里是标题这里是标题这里是标题这里是标题）
（这里是标题这里是标题这里是标题这里是标题这里是标题）

请检查下面的代码片段，它有两个部分，一个是

50%最大宽度

，另一个是

200px最大宽度

注意：在您复制到此处的代码中，缺少关闭

div

.row{
显示：-网络工具包盒；
显示：-webkit flex；
显示器：-moz盒；
显示：-moz flex；
显示：-ms flexbox；
显示器：flex；
填充物：5px；
宽度：400px；
}
.卡片内容标题{
文本溢出：省略号；
空白：nowrap；
溢出：隐藏；
文本对齐：左对齐；
字体系列：$roboto浓缩常规字体；
字号：18px；
颜色：$非活动文本颜色；
边缘顶端：13px；
页边距底部：0；
填充：0；
}
.card-content-title-1{
最大宽度：50%；
}
.card-content-title-2{
最大宽度：200px；
}

（这里是标题这里是标题这里是标题这里是标题这里是标题）
（这里是标题这里是标题这里是标题这里是标题这里是标题）

您能否检查

行

这是

卡片内容标题的父项

并找出它的宽度？父元素是否有一个设置的宽度？为了好玩，如果您粘贴一个.card content.row{box size:border box；}在混合中？你能检查

行

吗？它是

卡片内容标题

的父元素，并找出它的宽度吗？父元素是否有一个设置的宽度？为了好玩，如果你在混合中粘贴一个.card content.row{box size:border box；}，会发生什么？