根據另一個固定寬度的flex列

我有一個500px和2列的包裝。第二列是200px寬度（flex: 0 0 200px）。根據另一個固定寬度的flex列

如果第一個元素是> 300px，則第一列將根據此元素展開。

如何停止增長的第一列，僅基於包裝和第二列的寬度？

#hello { 
 
    display: flex; 
 
    width: 500px; 
 
} 
 
#hello > div { 
 
    height: 50px; 
 
} 
 
#hello > div:first-child { 
 
    background-color: yellow; 
 
} 
 
#hello > div:last-child { 
 
    background-color: red; 
 
    flex: 0 0 200px; 
 
} 
 
#baddiv { 
 
    width: 400px; 
 
    height: 20px; 
 
    background-color: purple; 
 
}

<div id="hello"> 
 
    <div> 
 
    <div id="baddiv"></div> 
 
    </div> 
 
    <div></div> 
 
</div>

來源

2016-03-04 Oscar Fanelli

如果你有你的代碼中的問題，你的問題需要包含[MCVE。除非您有Sass-> CSS編譯問題，否則**僅提供編譯的CSS（以及必要的HTML來重現問題）**。 – cimmanon

完成https://jsfiddle.net/b58aatdr/3/ –

你很難閱讀，代碼必須是**本身的問題**。 – cimmanon

設置max-width: 300px你的第一個div如果你想讓它本身可調節到300像素，並使用width: 300px;如果你希望它永遠是300像素，即使內容較少。基於評論

更新

的2：第二格組使用另一種伎倆，position: absolute，其中一個不需要設置任何寬度，它使用了家長和右div來限制左格從超過300像素增長。請注意，這是一個正常的行爲，它是如何工作的，如果它們沒有設置固定/最大寬度，它們會增長（或者在某些情況下換行）以適應其內容。

更新2基於評論

3：RD DIV組使用display: table代替flex，其中一個不需要設置任何寬度。

.hello { 
 
    display: flex; 
 
    width: 500px; 
 
} 
 
.hello > div { 
 
    height: 50px; 
 
} 
 
.hello > div:last-child { 
 
    background-color: red; 
 
    flex: 0 0 200px; 
 
} 
 
.baddiv { 
 
    width: 400px; 
 
    height: 20px; 
 
    background-color: purple; 
 
} 
 

 
/* alt. 1 */ 
 
.hello.nr1 > div:first-child { 
 
    background-color: yellow; 
 
    max-width: 300px; 
 
} 
 

 
/* alt. 2 */ 
 
.hello.nr2 > div:first-child { 
 
    flex: 1; 
 
    position: relative; 
 
    background-color: lime; 
 
} 
 
.inner { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    overflow: hidden; 
 
} 
 

 
/* alt. 3 */ 
 
.hello.nr3 { 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 500px; 
 
} 
 
.hello.nr3 > div { 
 
    height: 50px; 
 
    display: table-cell; 
 
} 
 
.hello.nr3 > div:first-child { 
 
    background-color: cyan; 
 
} 
 
.hello.nr3 > div:last-child { 
 
    background-color: red; 
 
    width: 200px; 
 
}

<div class="hello nr1"> 
 
    <div> 
 
    <div class="baddiv"></div> 
 
    </div> 
 
    <div></div> 
 
</div> 
 

 
<br> 
 

 
<div class="hello nr2"> 
 
    <div> 
 
    <div class="inner"> 
 
     <div class="baddiv"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div></div> 
 
</div> 
 

 
<br> 
 

 
<div class="hello nr3"> 
 
    <div> 
 
    <div class="baddiv"></div> 
 
    </div> 
 
    <div></div> 
 
</div>

來源

2016-03-05 08:54:19 LGSon

我正在尋找一個解決方案，不包括第一個div的寬度設置...否則是的，它可能是一個解決方案 –

@OscarFanelli使用'max-width'是告訴元素不要比一定的價值（所以你不要把它設置爲任何東西，只是告訴何時停止）。你還認爲它應該知道何時停止？ – LGSon

感謝它的div父母和div兄弟 –

根據另一個固定寬度的flex列

回答

相關問題