Как сделать так, чтобы текст во втором столбце переходил на новую строку после достижения гибкой основы столбца

Question

Как сделать так, чтобы текст во втором столбце переходил на новую строку после достижения flex-base столбца и почему ширина правого столбца все равно увеличивается, учитывая, что я установил flex-based в 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>

Answer 1

Надеюсь, это поможет вам!

.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>