Flexbox item multiline text overflow

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;
}