Ich habe eine Komponente, die aus Text neben einer Schaltfläche besteht. Der Text muss verkleinert und abgeschnitten werden, wenn nicht genügend Speicherplatz verfügbar ist. So was

.container .box {
  background-color: #efefef;
  padding: 5px;
  border: 1px solid #666666;
  flex: 0 0 auto;
}

.container .text {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.container {
  display: flex;
}

<div class="container">
  <div class="text">This is a text that is supposed to get truncated properly when needed.</div>
  <div class="box">Hello</div>
</div>

Wichtig Um zu sehen, ob es funktioniert, maximieren Sie das Snippet und verkleinern Sie das Browserfenster, damit der Text abgeschnitten wird.

Und es funktioniert gut, wie Sie sehen können.

Innerhalb eines anderen Flexcontainers

Das Problem tritt auf, wenn ich versuche, diese Komponente in einen anderen flexiblen Container zu stecken.

Meine Seite besteht aus einem festen Seitenbereich und dem verbleibenden Teil auf der rechten Seite, die sich an den verbleibenden Platz anpassen. Meine Komponente muss in diesen zweiten Teil passen, also habe ich sie dort abgelegt:

.container .box {
  background-color: #efefef;
  padding: 5px;
  border: 1px solid #666666;
  flex: 0 0 auto;
}

.container .text {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.container {
  display: flex;
}

.main {
  display: flex;
}

.main .side {
  width: 100px;
  background-color: #ff9900;
  flex: 0 0 auto;
}

.main .content {
  flex: 1 1 auto;
}

<div class="main">
  <div class="side"></div>
  <div class="content">
    <div class="container">
      <div class="text">This is a text that is supposed to get truncated properly when needed.</div>
      <div class="box">Hello</div>
    </div>
  </div>
</div>

Im zweiten Fall wird der Text nicht verkleinert. Ich verwende Chrome, aber es sieht auch in anderen Browsern nach einem Problem aus.