CSS: How to shrink first div in container instead of going outside of container (second container should be shown just after first) [closed]

Answer 1

It's not really clear what you are asking from this question alone but from the details of the other question it still seems as though flexbox is the solution as described by Oriol

.container {
  background-color: gray;
  display: flex;
  overflow-x: hidden;
  white-space: nowrap;
  justify-content: space-between;
}
.first {
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 1em;
  border: 1px solid red;
}
.third {
  flex: 1;
  text-align: right;
  background:pink;
}

<div class="container">
  <div class="first">first div content</div>
  <div class="second first">second div content</div>
  <div class="third">third div content</div>
</div>

JSfiddle Demo