CSS在兩列塊內將列表擴展爲全行高度，同時在第二列中有動態大小的圖像

Question

我有一個固定寬度和最大高度大小的塊。我需要在這個塊中放置兩個元素：一個列表和一個動態大小的圖像。 它們必須在一個層次上，像表格中的一列。該列表必須是主塊的20％寬度，圖像 - 寬度的80％。 當窗口寬度減小時，圖像會改變其大小。 我需要列表填充整行高度，保持每個列表項的高度相等。

我只能在CSS的幫助下才能實現這個目標嗎？此外，我不想使用display: grid和display: flex來解決瀏覽器兼容性問題。 同樣捨棄ui li贊成代表每個列表項目，因爲簡單的div在這種情況下是不可能的或者太複雜的解決方案。

如果只有在grid或flex的幫助下才有可能，那麼無論如何我都會明白這樣的解決方案。

一個例子： https://jsfiddle.net/Eugenii10/y0otpo2e/2/

我想： https://i.imgur.com/CL3m3Df.jpg

提前感謝！

Answer 1

這可以用柔性盒

DEMO

#wrapper { 
    border: 1px solid black; 
    display: flex; 
} 

#firstCol { width: 28%; } 

#firstCol ul { 
    margin: 0px; 
    padding: 0px; 
    list-style-type: none; 
    height: 100%; 
    flex-direction: column; 
    display: flex; 
} 

#firstCol ul > li { 
    display: flex; 
    flex-grow: 1; 
} 

#firstCol ul > li > a { 
    border: 1px solid rgb(0, 0, 0); 
    text-align: center; 
    flex-grow: 1; 
    padding: 1rem 0; 
} 

#secondCol {} 

#secondCol img { 
    max-width: 100%; 
    max-height: 300px; 
}