CODEWITHSUNDEEP
htmlflexbox
NibblyPig
NibblyPig

Reputation: 52932

Unable to get flex box to hide the overflow

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.

Upvotes: 1

Views: 32

Answers (2)

Neil W
Neil W

Reputation: 9122

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/

Upvotes: 1

Neilson Programmer
Neilson Programmer

Reputation: 43

You have given your first div inside your parent div a width of 100% it means it will take up the full width which is of your parent. Then where will be the space for the second div.... Try using widths like 90% and 10%.

Upvotes: 0

Related Questions