I got a flex container that contains 2 elements. Here is a JSFiddle Demo. The first one is a dynamic header with text. The second one is a wrapper for multiple dynamic buttons. Dynamic meaning the text is generated with javascript and does not have a specific width and there can be 2-4 buttons depending on the user (so I cannot set flex-basis or width to a specific amount of px on these flex-items).

I have set the overflow of the text to hidden and the text-overflow property to ellipsis.

Now I would like for the buttons to wrap to a new line only when the text has completely dissapeared. This is what I mean:

This article has led me to believe it has something to do with the flex-basis property.

The first gotcha with flex-wrap is that flex items will only begin to wrap if their sum total flex-basis is greater than the size of the flex container.

However, whatever properties I try, I cannot seem to get it to work how I want to.

.wrapper {
  display: flex;
  justify-content: space-between;
  border: 1px solid red;
  max-width: 600px;
}

.flex-wrapper {
  display: flex;
  min-width: 0;
}

.header {
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 24px;
}

.actions {
  display: flex;
  /* Only wrap once the text is fully gone and not visible anymore. */
  /* flex-wrap: wrap; */
}

.actions button:not(:last-child) {
  margin-right: 10px;
}

<div class="wrapper">
  <div class="flex-wrapper">
    <div class="header">
      Lorem ipsum dolar sit amet constructeur
    </div>
  </div>
  <div class="actions">
    <button>
      button1
    </button>
    <button>
      button2
    </button>
    <button>
      button3
    </button>
    <button>
      button4
    </button>
  </div>
</div>