css - 到达列的flex-basis后如何使第二列内的文本换行

如何在到达列的flex-basis后使第二列内的文本换行，并且考虑到将flex-basis设置为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>

最佳答案

希望对您有帮助！

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

关于css - 到达列的flex-basis后如何使第二列内的文本换行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53855782/