Flexbox item multiline text overflow

Question

I have flex item with very long string inside, and I want it to be wraped. But it doesn't work.

I set flex 1 1 500px, for instance (flex-basis = 500px) and it should wrap the string with word wrap: break-word

But it doesn't, and only if I set width=500px, it starts to work, so the question is why flex-basis 500px doesn't work and width works?

HTML:

<div class="map-detail-wrapper">
    <div class="ad-detail-text">
        <span>{{ad.text}}</span>
    </div>
</div>

CSS:

.map-detail-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.ad-detail-text {
    flex: 1 1 0%;
    width: 500px;
    line-height: 20px;
    font-size: 14px;
    margin: 20px;
    border: black;
    word-wrap: break-word;
    overflow: hidden;
}

score 5 · Answer 1 · edited May 23 '17 at 12:18

5

In your case you are allowing the item to shrink giving it flex: 1 1 500px which is short for:

flex-grow: 1;
flex-shrink: 1;
flex-basis: 500px;

since the content is less the 500px width and the item is allowed to shrink, it will. To fix that you can set flex: 0 0 500px

In most cases flex-basis is equivalent to width, you can read more about the differences here

For the difference between word-break: break-all and word-wrap: break-word you can read more about it here

edited May 23 '17 at 12:18

Community

1
1

answered May 18 '17 at 09:19

TedMeftah

1,845
1
21
29

Thank you for your answer but it doesn't work. You can check it in this example. https://www.w3schools.com/code/tryit.asp?filename=FFPNFOV52YNW – Simon May 18 '17 at 09:43
in that case you are telling each item to be `100%` the width of the parent – TedMeftah May 18 '17 at 09:55

Simon · Answer 2 · 2017-05-18T10:47:12.877

2

Finnally found workaround. You can see it there https://www.w3schools.com/code/tryit.asp?filename=FFPNFOV52YNW

It enough to add "word-break: break-all;" and it starting to work even without "width" only with "flex-basis".

But i still wondering why "word-wrap: break-word" works only with "width", and to make word wrap only with flex-basis it requires "word-break: break-all;"

edited May 18 '17 at 10:47

answered May 18 '17 at 09:42

Simon

997
1
15
29

Flexbox item multiline text overflow

2 Answers2

Linked