Why are my selectors not working inside this flexbox?

user_17918530 0
Viewed 36

I am just starting out in html and css and am not sure why my selector is not shrinking my image, can you help me out?

I created a flex-box to put both the image and the caption in, and I plan on adding a paragraph of text on the left side of the screen also in the flex-box which I will also include in the flex-box, but the problem is i can't shrink the image while it's in the flex-box without using a selector for all images instead of for this specific one, what am I doing wrong?

Edit: Made the code reproducible as per requested

#img-container {    
    display: flex;
    flex-direction: column;
    align-items: end;
}    
#selfie {            
    flex-basis: 10%;    
    min-height: auto;    
}
#selfie-caption {    
    justify-content: flex-start;    
}
<html>
    <link rel="stylesheet" href="resume.css">
    <main id="main">
        <title>My Name</title>
        <div id="img-container">
            <figure>
                <img id="selfie" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/2010-kodiak-bear-1.jpg/220px-2010-kodiak-bear-1.jpg">
                <figcaption id="selfie-caption">An Image Of Me</figcaption>
            </figure>
        </div>
    </main>
</html>

flexbox css html
1 Answers

flex-basis not works, because you set display: flex to #img-container. So your flex item is figure and not #selfie and #selfie-caption. So flex-basis: 10% not give a meaning for that. So should:

figure{
display: flex;
flex-direction: column;
}
#selfie {            
flex-basis: 10%;    
min-height: auto;    
}
user_170071840
Related