Flexbox centered div does not shrink and therefore cannot truncate text in nested element-CodePudding

I am trying to truncate the long text in the span with id first-item, when the screen gets smaller. However, when margins are set on the parent, it cannot shrink and therefore truncate does not seem to work. I believe it is related to

CodePudding user response：

add max-width:100% to main

body {
  display: flex;
  flex-direction: column;
}

main {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  margin: auto;
}

#container {
  display: flex;
}

#first-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<body>
  <main>
    <div id="container">
      <span id="first-item">Long long long long long long long long long long long long long long long long long long long long long long long long long text to be truncated</span>
      <span>Shorter text</span>
    </div>
  </main>
</body>