Flexbox Div inside a container div
I'm having some issues with a small challenge i'm working on. I have a container with two seperate 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
This is what I have for my image container so far.
This is my content container.
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
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
maybe because of this
height: min-content;
??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
remove
align-items: flex-start;
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 stretchonly declare properties that you need 🙂
Doing that works:
![No description](https://cdn.answeroverflow.com/1141800825249865778/image.png)
Thank you.
Thanks for the pointer. I was trying a few things to see if I could figure it out. Thanks for the pointers