Javascript 如何防止CSS网格崩溃，使文本溢出省略号生效

我的CSS网格“吹出”有一些问题，这导致我的文本属性

文本溢出：省略号
无法工作

我看过很多关于这个的帖子，也尝试过很多东西，但我不明白我错了什么。我可以用一个简单的例子来重现

在我的例子中，我使用的是第三部分组件，我想将我的UI放在其中一个元素中

例如，元素
third party container
下面是第三方组件，我的UI包含在
my container
m中，我希望在其中完全填充
第三方容器

HTML

也可提供

因此在
my container
中，我有一行和三列。前两列的宽度很小。第一列可能略有不同，但总是非常小。第二个刚修好

第三列
s3
（颜色为
粉红色
）有时可能包含的文本比容器中的文本长。然而，这就是我在上面的例子中看到的


当我在dev工具中看到这一点时，我可以看到s3正在“爆炸”，即没有包含在它的容器中


我以前通过使用
minmax（0，1fr）
解决了这个问题，但它在这里不起作用

外部容器有一个固定的宽度，我的容器是这个宽度的100%

我做错了什么？我如何才能让它工作？
问题是在
\s3
上使用
display:grid
。删除它，同时添加
宽度：100%


#第三方容器{
高度：40px；
宽度：140px；
背景：橙色；
}
#我的容器{
背景：黄色；
身高：100%；
显示：网格；
对齐项目：居中；
调整项目：左；
网格模板列：最小内容13px最小最大值（0，1fr）；
网格模板行：1fr；
柱间距：2px；
空白：nowrap；
}
#s1{
背景：红色；
}
#s2{
背景：绿色；
溢出：隐藏；
}
#s3{
背景：粉红色；
最小宽度：0；
溢出：隐藏；
文本溢出：省略号；
宽度：100%；
}

S1
S2
AAAAA BBBBBBBBBBBBCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
哇，太快了，非常感谢你！我总是在显示文本的任何div上都有display:grid，就像过去一样，我认为我必须这样做才能使文本垂直居中。但是我做了上面的（在我的例子中）并且文本看起来还可以。奇怪的是，display:grid是如何做到这一点的（例如，我的容器中包含display:grid），但这就是问题所在。我们轻轻地劝阻问候，希望你能帮助，谢谢，提前感谢，感谢信，问候，亲切的问候，签名，请你能帮助，闲聊的材料和缩写的txtspk，恳求，你被困多久了，投票建议，元评论等。只需解释你的问题，并展示你已经尝试了什么，你期望什么，实际上发生了什么。
<div id='third-party-container'>
  <div id='my-container'>
    <div id='s1'>S1</div>
    <div id='s2'>S2</div>
    <div id='s3'>aaaaaaaabbbbbbbbbbbccccccccccccccccccccccccccddddddddddddddd</div>
  </div>
</div>

    #third-party-container {
        height: 40px;
        width: 140px;
        background: orange;
    }

    #my-container {
        background: yellow;
        height: 100%;
        width: 100%;
        display:grid;
        align-items: center;
        justify-items: left;
        grid-template-columns: min-content 13px minmax(0, 1fr);
        grid-template-rows: 1fr;
        column-gap: 2px;
        white-space: nowrap;            
    }

    #s1 {
        background: red;  
         grid-row: 1;
         justify-items: left;
         grid-column: 1;          
         align-items: stretch;   
    }

    #s2{
        background: green;
        grid-row: 1;   
        overflow: hidden;               
        grid-column: 2;   
    }

    #s3 {  
        background: pink;
        grid-row: 1;      
        justify-items: left;
        display: grid;
        align-items: center;
        grid-column: 3;                                         
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;   
    }