How to make the text inside the second column break to a new line after reaching the column's flex-basis

Question

How to make the text inside the second column break to a new line after reaching the column's flex-basis and why is the right column's width increasing anyway considering I've set flex-basis to 100px?

.specific-image-flexbox {
    display: flex;
}
.specific-image-column {
    flex: 4;
    background-color: red;
}
.artwork-info-column {
    flex: 1;
    background-color: #f5f5f5;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 100px;
    padding: 15px;
    line-height: 1.8rem;
    background-color: blue;
}

<div class="specific-image-flexbox">
    <div class="specific-image-column">sssss</div>
    <div class="artwork-info-column">sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</div>
</div>

Plus you have to tell the text to break at break at some point. `word-break: break-all;` — Paulie_D, Dec 19 '18 at 16:55
The answer to your second questions is [here](https://stackoverflow.com/q/36247140/3597276) ([demo](https://jsfiddle.net/cnmxfh01/)). — Michael Benjamin, Dec 19 '18 at 17:08
Like Paulie said, add word-break: break-all and remove flex: 1, since it has no effect because of the flex-grow: 0 later on. — VXp, Dec 19 '18 at 19:22

score 1 · Accepted Answer · answered Dec 20 '18 at 06:42

Hope this help for you!

.specific-image-flexbox { display: flex; }
.specific-image-column {
    flex: 4;
    background-color: red;
}
.artwork-info-column {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 100px;
    padding: 15px;
    line-height: 1.8rem;
    background-color: blue;
    word-break: break-all;
}

<div class="specific-image-flexbox">
    <div class="specific-image-column">sssss</div>
    <div class="artwork-info-column">sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</div>
</div>

How to make the text inside the second column break to a new line after reaching the column's flex-basis

1 Answers1