How do I stop elements from flowing outside the bottom of a flexbox element?

Question

Is it possible to contain/limit the height of an image in a column flexbox? In this fiddle, I would like to make the image be displayed in a reduced size in order to make the title underneath it be just inside the bottom of the flex parent.

Ideally, I would like to do this with a 100% CSS solution.

Here is the fiddle: https://jsfiddle.net/brandoncc/czLjoxdu/4/

The basic CSS code is:

div {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid green;
    width: 400px;
    height: 300px;
}

This actually works (I'm not sure why), but it loses the image perspective. — Brandon, Jul 01 '20 at 22:12

score -1 · Answer 1 · answered Jul 01 '20 at 07:37

-1

Just add a new class

img
{
  height:50%;
}

Change the percentage as you like.

answered Jul 01 '20 at 07:37

D A

1,724
1
8
19

score -1 · Answer 2 · answered Jul 01 '20 at 07:39

-1

try this..

<div>
<img src="http://placehold.it/350x350" / class="img-fluid">
<p>Image title</p>

div {
border: 1px solid green;
width: 400px;
height: 300px;
position:relative

}

answered Jul 01 '20 at 07:39

meanstackbasitkhan

1
3

score -1 · Answer 3 · answered Jul 01 '20 at 07:39

-1

You may add the following to keep the image from overflowing and use the max space. You can change the percentage to smaller the image. Just tweak it an see what works best for you.

img {
  height: 100%;
}

answered Jul 01 '20 at 07:39

Deitsch

1,610
14
28

How do I stop elements from flowing outside the bottom of a flexbox element?

3 Answers3