Flexbox Div inside a container div

I'm having some issues with a small challenge i'm working on. I have a container

div

div

with two seperate

div

div

inside that I have side by side using flexbox. One div holds the an image and the second div holds content but for some reason I cant get the content div background to completely cover the entire div. I dont have any height set on the main container

.main-container{
    display: flex;
    justify-content: space-around;
    background: rgb(236, 222, 222); 
    height: auto;
    padding: 20px;
}

.main-container{
    display: flex;
    justify-content: space-around;
    background: rgb(236, 222, 222); 
    height: auto;
    padding: 20px;
}

This is what I have for my image container so far.

.img-container{
    width: 350px;
    /* height: min-content; */
    /* padding: 20px; */
}

.img-container{
    width: 350px;
    /* height: min-content; */
    /* padding: 20px; */
}

This is my content container.

.content-container {
    width: 350px;
    padding-left: 20px;
    background-color: white;
    height: min-content;
}

.content-container {
    width: 350px;
    padding-left: 20px;
    background-color: white;
    height: min-content;
}

I'm trying to add a white background to that entire half but for some reason the color stops where the button is located. Any ideas to help me progress with this challenge. Thanks in advance.

8 Replies

croganm•17mo ago

Do you have a codepen example you could send? This helps eliminate any other weird issues like unclosed tags earlier in the document or anything like that. Also helps us work with your code

Mannix•17mo ago

maybe because of this height: min-content;??

dellannieOP•17mo ago

I can create one. I'll do that and send it. I tried that on and still the background color stops at the button https://codepen.io/dellannie/pen/wvRvBVq let me know if that works. I put a place holder image since I had the other image saved locally. Thanks for the help in advance

Mannix•17mo ago

remove align-items: flex-start;

croganm•17mo ago

Give the container an align-items: stretch and remove on the content-cotnainer height: min-content Or just remove align-items since the default is stretch

Mannix•17mo ago

only declare properties that you need 🙂

croganm•17mo ago

Doing that works:

dellannieOP•17mo ago

Thank you. Thanks for the pointer. I was trying a few things to see if I could figure it out. Thanks for the pointers

Gaming

Programming

Flexbox Div inside a container div