max-width与百分比不一致

Question

我在css中遇到“max-width”属性的问题。 在我的网站上，有一个标题仅限于一行，并在溢出时具有此属性：

text-overflow: ellipsis;

一切正常并且溢出效果很好，但出于某种原因，当我在max-width属性中使用百分比时，它不会缩小标题的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>

结果：

如果我将max-width更改为像素，而不是百分比：

max-width: 200px

结果：

当我使用百分比时，有什么方法可以避免溢出行为吗？

编辑： 有.row：

的CSS

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

Answer 1

请检查以下代码段，它有两个部分，一部分50% max-width，另一部分200px max-width。

注意：在您复制的代码中，缺少结束div。

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

.card-content-title {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

  text-align: left;
  font-family: $roboto-condensed-regular;
  font-size: 18px;
  color: $inactive-text-color;

  margin-top: 13px;
  margin-bottom: 0;
  padding: 0;
}

.card-content-title-1 {
  max-width: 50%;
}
.card-content-title-2 {
  max-width: 200px;
}

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