CSS développer une liste dans un bloc de deux colonnes à la hauteur de la ligne complète tout en ayant une image de taille dynamique dans la deuxième colonne

Question

J'ai un bloc avec une largeur fixe et une hauteur maximale. J'ai besoin de placer dans ce bloc deux éléments: une liste et une image de taille dynamique. Ils doivent être à un niveau comme des colonnes dans une table. La liste doit être une largeur de 20% du bloc principal, et l'image - 80% de largeur. L'image change de taille lorsque la largeur de la fenêtre diminue. Et j'ai besoin que la liste remplisse la hauteur de la ligne entière en préservant la hauteur égale pour chaque élément de la liste.

Puis-je y parvenir seulement avec l'aide de CSS? Aussi, je ne veux pas utiliser display: grid et display: flex pour résoudre le problème de compatibilité du navigateur. Également en supprimant ui li en faveur de la représentation de chaque élément de la liste en tant que simple div est une solution impossible ou trop compliquée dans ce cas.

Si c'est seulement possible avec l'aide de grid ou flex alors j'apprécierai une telle solution dans tous les cas.

Un exemple: https://jsfiddle.net/Eugenii10/y0otpo2e/2/

Ce que je veux: https://i.imgur.com/CL3m3Df.jpg

Merci à l'avance!

Answer 1

Ceci peut être accompli avec flex-box

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; 
}