flex左右佈局 左邊固定 右側自適應

flex左右佈局

左邊固定 右側自適應

想要保證自適應內容不超出容器怎麼辦。
經過爲自適應的一側設置width: 0;或者overflow: hidden;解決。

首先實現標題的佈局，也很簡單：

<div class="item">
    <div class="l">LEFT</div>
    <div class="r">
        <div class="title">OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG</div>
        <div class="content">
            RIGHT FULL
        </div>
    </div>
</div>

.item {
    display: flex;
}
.item .l {
    width: 240px;
    min-width: 240px;
    background-color: #ff5f00;
}
.item .r {
    background-color: mediumseagreen;
    flex-grow: 1;
    padding: 20px;
}
.item .r .content {
    width: 100%;
    word-break: break-all;
}
.item .r .title {
    font-weight: bolder;
    font-size: 1.4em;
    width: 100%;
    /*overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;*/
}

let str = '';
for (var i = 0; i < 1000; i++) {
    str += ('' + Math.random().toString().substr(2, 5));
}
document.querySelector('body > div.item > div.r > div.content').innerHTML = str;

預覽發現基本符合預期：

這時若是想要標題不換行，超出省略號；將CSS中註釋的代碼取消註釋，會發現，內容將容器撐開，出現了橫向滾動條，這不是咱們想要的。

要解決這個問題，能夠：

.item .r {
    background-color: mediumseagreen;
    flex-grow: 1;
    padding: 20px;
    /*增長一個*/
    width: 0;
}

或者：

item .r {
    background-color: mediumseagreen;
    flex-grow: 1;
    padding: 20px;
    /*增長一個*/
    overflow: hidden;
}

也能夠達到預期。

The end...Last updated by Jehorn, 2:55 PM, Thursday, May 9, 2019