Truncate multiple one line text elements

Question

I want to truncate multiple text elements.

The text in the red and green box have both variable lenghts. The blue box with some UI-Elements has a fixed length of 200px.

If you resize the browser window, the blue box is shifted left and at FIRST the text in the green box should be truncated. If there isn't any more to truncate in the green box, then the text in the red box should be truncated.

I have tried it with display:flex but then the green box has some space on left to the red box, but the green box should be close to the red box - as shown in my snippet. Annotation: As explained above > the text in red/green box is variable > they havn't a fixed width.

(At the moment the blue box is shifted downside - I wasn't also able to fix this.)

    <div style="display:table;width:100%; border:1px solid black;">
        <div style="float:left; white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;border:1px solid red;">
            Text with High Priority
        </div>
        <div style="float:left;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;border:1px solid green;">
            Text with Low Priority
        </div>
        <div style="float:right;width:200px;min-width:200px;border:1px solid blue;">
            <button type="submit" name="action" value="1">test</button>
        </div>
    </div>

Answer 1

You can do this with flexbox by giving the low priority element a big flex-shrink factor

.box {
  display: flex;
  border: 1px solid black;
}

.high,
.low{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid red;
  min-width:20px;
}

.low {
  flex-shrink:9999;
  border: 1px solid green;
}

.button {
  margin-left:auto;
  min-width: 200px;
  border: 1px solid blue;
}

<div class="box">
  <div class="high">
    Text with High Priority
  </div>
  <div class="low">
    Text with Low Priority
  </div>
  <div class="button">
    <button type="submit" name="action" value="1">test</button>
  </div>
</div>