Text overflowing flexbox item

I am trying to have a float element and two lines of text on the right side of it (I dont want these two lines to break in any way). I also need the container to be a flex item.

This below example is wrong as text2 breaks and goes under the float element:

 .container1 {      display: flex;    }    .float {      float: left;      height: 30px;      width: 30px;      background-color: brown;    }    .text1 {      background-color: green;    }    .text2 {      background-color: tomato;    }

<div class="container1"><div class="container2"><div class="float"></div><div class="text1">Text1 </div><div class="text2">Text2 and some other</div></div></div>

Using white-space: nowrap; fixes the breaking issue but then the text overflows:

.container1 {      display: flex;    }    .container2 {      white-space: nowrap;    }    .float {      float: left;      height: 30px;      width: 30px;      background-color: brown;    }    .text1 {      background-color: green;    }    .text2 {      background-color: tomato;    }

<div class="container1"><div class="container2"><div class="float"></div><div class="text1">Text1 </div><div class="text2">Text2 and some other</div></div></div>

How can I keep the two lines beside the float to not break and not overflow while keeping the container as a flex item?