CSS - 用一個最大寬度填充兩個百分比寬度列的空間？

因此，自從我開發Web開發已經有一段時間了，我似乎無法記住如何處理這個問題。後來Google的使用時間，我更瞭解柔性盒和其他整潔的工具，但沒有一個解決方案能夠完成這項技巧。CSS - 用一個最大寬度填充兩個百分比寬度列的空間？

我想要什麼：

容器，它有兩列，左，右。
左欄寬度通常爲25％，右欄寬度通常爲75％。
右列有最大寬度約束，比方說500px。
當右列達到其最大寬度時，左列應填滿剩餘空間，以免浪費。

我似乎無法得到此發生。我已經嘗試了Flex的設置，每個的右側列爲75％，左側爲「拉伸」。我試過改變顯示樣式;我甚至嘗試過一些溢出：隱藏的技巧（完全知道它們不會工作，因爲我不想隱藏溢出）。到目前爲止，我只得到兩種變化 - 兩種色譜柱的初始尺寸保持在25％/ 75％，或者左側色譜柱延伸到右側色譜柱的後面，而不是佔用可用空間。

我正在尋找一個CSS解決方案，如果可能的話。

來源

2017-08-13 Query

.a { 
 
    display: flex; 
 
} 
 

 
.left { 
 
    flex: 1; 
 
} 
 

 
.right { 
 
    flex: 3; 
 
    max-width: 500px; 
 
} 
 

 
.left, .right { 
 
    border: 1px solid #ddd; 
 
    padding: 10px; 
 
}

<div class="a"> 
 
\t \t <div class="left"> 
 
\t \t \t first 
 
\t \t </div> 
 
\t \t <div class="right"> 
 
\t \t \t second 
 
\t \t </div> 
 
\t </div>

爲max-width: 500px在媒體.right，大屏幕上你不能看到75％的寬度。

來源

2017-08-13 03:08:22 bhv

這實際上是我嘗試的第一件事情之一，但我的代碼中的flex被忽略。我現在正在測試我的結果，看看有什麼可以重寫它 - 是否有一些常見的顯示或寬度/高度繼承會優先？ – Query

找到它;在我的代碼中更高的東西是級聯到內部div，並將它們設置爲position：absolute。我沒有檢查Chrome的開發人員工具中的該片段，並確定了div的位置。謝謝！ – Query

CSS - 用一個最大寬度填充兩個百分比寬度列的空間？

回答

相關問題