Html 文本溢出省略号不适用于具有灵活宽度的表单元格内的div

我搜索了堆栈溢出并查看了一些解决方案，但到目前为止没有任何效果。我所拥有的是一个具有灵活列宽的表，其中一个表单元格具有div，其中包含一些文本，我希望使用省略号进行溢出

JS fiddle示例如下：

<table>
  <td class= 'name'>Name</td>
  <td class='desc'>
    <div>
      <div class='desc-1'>descript1:</div>
      <div class='desc-2'>really long description that I want to have ellipses for ajhdfjhdf ajhdf akjdhf asdjfh askdjfh askdjfh asdkjfh askjdfh askdjfh askjdfhaksjdhf askjfdh ajkdsfh
      </div>  
    </div>
  </td>
</table>

.name {
  width: 50%;

}
.desc {
  width: 50%;
  max-width: 100%;
}
td {
  border: 1px solid black;
}
td div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

如何使其适用于灵活的网格列宽（百分比值）

编辑：这里的解决方案帮助解决了我的问题：

请使用此代码

/*请在CSS中使用此代码*/
.responsive{宽度：100%；溢出：隐藏；}
.表格数据{宽度：100%；最大宽度：100%}
/*你可以给固定宽度如下*/
.描述{
宽度：50%；
最大宽度：300px；
}

名称
描述1：
非常长的描述，我想为ajhdfjhdf ajhdf akjdhf asdjfh askdjfh askdjfh asdkjfh askjdfh askdjfh askdjfh askjdfh askjdfh askjdfhaksjdhf askjfdh ajkdsfh使用省略号

以下是

文本溢出：省略号

的工作要求：这对我终于起作用了：谢谢！这似乎有效，但我仍然面临一些问题，并调查为什么…@ski您现在面临哪些问题？请注意。这（这里投票率最高的解决方案）最终对我起了作用：

.desc {
      width: 50%;
      max-width: 300px;
    }