12 replies

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.

KP-C

Kevin Powell - Community•3y ago•

12 replies

dellannie

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

.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.

Flexbox Div inside a container div

Similar Threads

Flexbox Div inside a container div

Similar Threads

Similar Threads

Similar Threads