text-overflow: ellipsis not working in a nested flex container

Question

I have a component which consists of text next to a button. The text must shrink and get cut off if not enough space is available. Like this:

Answer 1

Use width property to work with overflow

Note: Width should be in px

.container .box {
  background-color: #efefef;
  padding: 5px;
  border: 1px solid #666666;
  flex: 0 0 auto;
}
.container .text {
  flex: 1 1 auto;
  width: 250px;
  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;
}

  

  

    

      
This is a text that is supposed to get truncated properly when ndgsdgeeded.
      
Hello