Bootstrap 4 - w-100 is not fitting parent flex div ... if is smaller than parent div?

Question

I'm breaking my head about this, and cannot seem to solve it.

When I'm adding an image of 100px width to a desktop site, and apply the class w-100 to it, it should stretch to the width of the parent div (column in this case), right? That's how it works when you do this:

<div class="row">
    <div class="col-md-8">
        <img src="image-w100px.jpg" class="img-fluid w-100">
    </div>
    <div class="col-md-4">
    </div>
</div>

However if I try to do the same inside a flex div (to center/middle align the picture next to a large amount of text, it won't work

<div class="row">
    <div class="col-md-8 flex">
        <div class="align-self-center">
            <img src="image-w100px.jpg" class="img-fluid w-100">
        </div>
    </div>
    <div class="col-md-4">
        Large amount of text (picture on the left should vertically align.
    </div>
</div>

I have tried every combination (img-fluid alone, w-100 alone, combination of img-fluid and w-100, removing classes and adding style="width: 100% !important"), but none of the possibilities make my img expand further than it's original size, it'll compress/resize to a lower size, but not expand.

Why is this not working?

No, just bootstrap - nothing else. And I can reproduce it using a boilerplate BS4 template. So it's not other code that's interfering. — Taapo, Apr 19 '20 at 11:51
I updated my question, as I didn't notice I had applied a flex class to the parent div. — Taapo, Apr 19 '20 at 12:09
Flex is the issue: https://stackoverflow.com/questions/41774646/image-is-not-resizing-in-a-flexbox-layout — Carol Skelly, Apr 19 '20 at 12:12

score 0 · Answer 1 · answered Apr 19 '20 at 12:12

After testing some more, I found a solution. Adding w-100 to the align-self-center class, it now works:

<div class="row">
    <div class="col-md-8 flex">
        <div class="align-self-center w-100">
            <img src="image-w100px.jpg" class="img-fluid w-100">
        </div>
    </div>
    <div class="col-md-4">
        Large amount of text (picture on the left should vertically align.
    </div>
</div>

Bootstrap 4 - w-100 is not fitting parent flex div ... if is smaller than parent div?

1 Answers1