<分区>
正如标题所说，这就是问题所在。 (在我查看有关该主题的所有问题/答案之前，它们并没有解决我的问题)
我有一个名为 testItem 的模板区域这是一个 flex 容器，在里面我有一个 h6元素，它具有 css 属性:overflow: hidden , white-space: nowrap和 text-overflow: ellipsis所以它所以我应该截断文本但不是，这会移动下面的容器(我不想要这个)。
flex容器，其模板区域称为testItem继续按其内容(h6 元素)增长，但不会被截断。
我试过:添加 min-width:0 flex 容器的属性或 flex: 1 , flex-grow: 0但它不起作用。唯一的可能是把 max-width: Xpx但这还不够好，因为如果我有一个大屏幕分辨率的长文本，这个文本会分散其余的容器......
我想截断 X 分辨率的文本，这样容器就不会针对此内容继续增长，并且其余元素保持固定(但这是响应式的，因此我不能使用固定单位)
注意:如果您需要进一步说明，我可以毫无问题地解决它们:)
注意 2:我附加了一个 CodeSandbox 链接:https://codesandbox.io/s/03o4x2r33n
提前致谢!
附件代码及其执行
.tagsItem {
grid-area: tags-item;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.testItem {
grid-area: test-item;
height: 100%;
width: 100%;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.firstDatesItem {
grid-area: first-dates-item;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.secondDatesItem {
grid-area: second-dates-item;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.datesItem {
grid-area: dates-item;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.patientItem {
grid-area: patient-item;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.endoscopyContainer {
height: 100%;
width: 100%;
display: grid;
grid-template-areas: "tags-item test-item dates-item patient-item";
grid-template-columns: 1fr 2fr 3.5fr 3.5fr;
column-gap: 0.5em;
justify-items: start;
align-items: center;
}
.dividerContainer {
margin-left: 5px;
}
.priorityCard {
height: 1.8em;
width: 8em;
border: 1px solid pink;
border-radius: 20px;
color: red;
text-align: center;
background: #e5737347;
}
.statusCard {
height: 1.8em;
width: 8em;
border: 1px solid pink;
border-radius: 20px;
color: green;
text-align: center;
}
.applicationTypeCard {
height: 1.8em;
width: 8em;
border: 1px solid pink;
border-radius: 20px;
color: blue;
text-align: center;
background: #9ecd601f;
}
.testCodeLabel {
color: grey;
}
.testNameLabel {
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}<div class="endoscopyContainer">
<div class="tagsItem">
<h6 class="priorityCard">Example</h6>
<h6 class="statusCard">Example2</h6>
<h6 class="applicationTypeCard">Example3</h6>
</div>
<div class="testItem">
<h6 class="testNameLabel">
Text that I want to truncate but is still growing its container because of it
</h6>
<h6 class="testCodeLabel">12312ASD</h6>
</div>
<div class="datesItem">
Dates ExampleDates ExampleDates ExampleDates ExampleDates ExampleDates ExampleDates ExampleDates ExampleDates ExampleDates ExampleDates ExampleDates Example
</div>
<div class="patientItem">
Patient ExamplePatient ExamplePatient ExamplePatient ExamplePatient ExamplePatient ExamplePatient ExamplePatient ExamplePatient ExamplePatient ExamplePatient
</div>
</div>