How to avoid images covering up text in flexbox with DIV?

Question

This is my layout and CSS:

body {
font-family: Helvetica, sans-serif;
background-color: #B2BEB5;
}

b {
font-family: Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
font-family: Helvetica, sans-serif;
}

}


.flex-container {
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 16px;
}

.flex-container h2, h3, h4 {
font-family: Arial, sans-serif;
}

.flex-container {
    color: #333;
    display: flex;
    flex-direction: row;
    width: 880px;
    padding: 20px;

}
.flex-left {
width: 195%;   
padding: 10px;
margin-top: -30px;
}

.flex-right {
width: 95%;
text-align: right;
padding: 10px;
margin-top: -30px;
}

.flex-left1 {
width: 50%;
margin-top: -50px;
}

.flex-left1 img {
max-width:100%;
max-height:100%;
}

.flex-right1 {
width: 90%;
margin-left: 10px;
margin-top: -70px;
}

.ax2 {
background-color: #FFFFFF;
margin: 30px;
margin-bottom: 20px;
margin-right: 130px;
width: 920px;
border: 2px solid;
height: auto;
}

.price {
font-weight: 700;
}

section.ksmvehicles {
background-color: #FFF;
margin-left: 20px;
height: auto;
padding: 15px;
}

div.image-card-thumbnails {
display: flex;
flex-grow: 1;
max-width: 34%;
}

.image-card-thumbnails img {
max-width: 100%;
max-height: 33%;
}

.ksm-test-ac1 {
background-color: blue;
color: #FFF;
border-radius: 5px 2px;
height: auto;
}


ANYTOWN CAR SALES



1 Newtown Road, Anytown



5 Minutes from Dublin centre



    
       FORD MONDEOS
    
    
       £4,000
    


    
       
        
       
       
       
       
       
       
       
        

    

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at aliquam odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis et facilisis est, eget laoreet ligula. Fusce mi metus, placerat vel turpis eu, condimentum accumsan augue. Cras feugiat tortor ipsum, id pretium urna sollicitudin nec. Suspendisse et elementum diam. Curabitur in eros nec felis efficitur ullamcorper sit amet a turpis.

Phasellus laoreet lectus non arcu efficitur, ut consectetur sapien sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi congue id libero ut pharetra. Sed vel posuere tellus. Curabitur scelerisque mattis nibh, sed tristique ex gravida sed. Suspendisse potenti. Suspendisse quis velit felis. Nulla posuere elit quis elit rutrum, in ornare tortor vestibulum.

Pellentesque sit amet accumsan est, id elementum lectus. Proin eget pellentesque tellus. Morbi a facilisis felis. Maecenas ultricies imperdiet placerat. Nulla ac eleifend nibh, posuere tristique arcu. Ut sagittis, tellus quis vestibulum commodo, dui orci faucibus libero, at tempus erat massa at ligula. Donec eget consectetur orci, nec accumsan magna. Nulla facilisi. Integer egestas purus sed porttitor varius. Nulla pellentesque nisl id odio vulputate, sit amet scelerisque orci posuere. Nullam id erat et risus pellentesque tincidunt sed vel ante. Nulla faucibus lobortis tellus, eu mollis eros elementum et. Donec nec metus mollis lorem facilisis tristique eget eu augue. Aliquam erat volutpat.

Nulla vitae fermentum purus, vel eleifend sapien. Donec laoreet ut dui sed vestibulum. Maecenas suscipit semper nisi non placerat. Phasellus id massa at ligula suscipit imperdiet. In varius orci lectus, et euismod justo porttitor tristique. Suspendisse non tellus gravida, condimentum libero non, semper nibh. Mauris egestas molestie leo, vitae rhoncus purus maximus aliquet. Proin nec nibh lacus.

Duis malesuada nisi augue. Nulla leo lorem, auctor quis elit non, mattis malesuada mi. Proin auctor lectus eros, aliquam imperdiet augue tempor eu. Nam in fringilla eros, ut feugiat ligula. Duis dapibus quam a eleifend ultricies. Phasellus ac orci et lectus mattis mollis. Nulla orci eros, vestibulum varius ultricies sed, vehicula at lacus. Praesent vitae nisi id odio aliquam tristique. Aliquam sed turpis a diam egestas ornare sed sed lacus. In at pharetra tortor, vel elementum sem. Integer elementum congue quam non venenatis. Sed maximus dolor vitae risus rhoncus, eu dapibus urna porttitor. 
    Registered: 29/11/2007

The biggest problem in this is how to avoid the images covering the text while keeping flex within the .image-card-thumbnails CSS which are:

div.image-card-thumbnails {
display: flex;
flex-grow: 1;
max-width: 34%;
}

.image-card-thumbnails img {
max-width: 100%;
max-height: 33%;
}

So far flexbox works for this, but not quite how I'd expected it too, especially with long areas of text.

This is what happens:

Not the end result I was expecting.

I wanted to have it along the bottom of the DIV, the images maintaining their max-width of 100%, max-height: 33% but don't know where to fit it.

I tried margin-top: 22px; but that didn't quite work.

I want that column to move along with text if there's a huge paragraph.

Any help is appreciated!

Sayyed Mohammad Maroof · Accepted Answer

add property "flex direction : column;" to this class - "div.image-card-thumbnails" and also adjust max-width according to your requirement

How to avoid images covering up text in flexbox with DIV?

Answers (2)

Related Questions