如何在到达列的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>