Unable to get flex box to hide the overflow

Issue

I would like a parent that contains two side by side divs, the right one is 20px and the left one fills the remaining space.

If there is too much text in the left div, I would like the excess to be hidden.

Currently everything I have tried, it ends up wrapping onto the next line.

Here's my code:

https://jsfiddle.net/5y7fngbk/

<div style="display: flex; width: 300px; background-color: blue;">
  <div style="width: 100%;overflow: hidden;">hello testset hello cats hello hello hello hello hello hello </div>
  <div style="width:20px;">x</div>
</div>

Can anyone tell me why overflow:hidden is not respected or how I can fix this?

For the purposes of this example I have set the parent to 300px wide. However it would be 100% of its own parent when I come to use this code, i.e. the left div would shrink as I resize the window.

Solution

You need to prevent wrapping:

    <div style="display: flex; width: 300px; background-color: yellow;">
      <div style="width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">hello testset hello cats hello hello hello hello hello hello </div>
      <div style="width:20px;">x</div>
    </div>

https://jsfiddle.net/Lmk4vxew/

Answered By - Neil W