Image inside flexbox makes div be bigger than what flex says

Question

so I'm trying to do some html+css coding, but I believe that I'm having some newbie issues, and googling it wouldn't find a direct solution...

What is happening is that, I set a container to be display:flex; flex-direction: column; , and two divs inside it with flex:1;.
At this moment, everything is fine and I have two divs with the same size, one on top of the other.
Now, when I set an image inside the first div, the image makes the div bigger then 50% of the screen... The same issue happens when I set max-width: 100%; max-height: 100%;
A similar (but different) issue happens if flex-direction is ROW.

What would be the right way to do this?

My goal would be to have the picture NOT INCREASING the size of the div that contains it, and actually respect the max sizes.

Thanks!!!

BTW, Here is how it is looking right now:

.flex-container {
  display: flex; 
  height: 100vh;
  background-color: #cccccc; 
  flex-direction: column;
 }

.img {
 flex: 1;
 background-color: blue;
 text-align: center;
}

.bla {
 max-height: 100%;
 max-width: 100%;
}

.textBox {
 flex: 1;
}

<body>
    <div class="flex-container">
        <div class="img">
            <img class="bla" src="https://www.k-type.com/wp-content/uploads/2017/01/example_box-1.png" alt="food box purchased">
        </div>

        <div class="textBox">
            <h1> SUCCESS!</h1>
            <h2>Your order is complete. We will deliver your box in 3 days.</h2>
        </div>
    </div>
</body>

Thanks a lot, also for marking as duplicate... The naming of the other issue is not totally clear to me, but the cause/solution is the same — GuiFGDeo, Dec 06 '19 at 22:36

Image inside flexbox makes div be bigger than what flex says

0 Answers0