This is the demonstration of my issue.
And Also this is the rundown of my HTML:
<< div course=" container">
<> < div course=" f1">
> TITLE
<.
<< div course=" f2">
<> < div course=" f2-child">
<> < img/>>.
<.
<.
<.
Essentially it's a flex container which has 2 flex things. The initial flex thing( f1) is the title, which uses up some dealt with elevation. And also the 2nd flex thing( f2) load the remainder of the elevation. Thus far so excellent.
And also I placed one more flex container( f2-child) within f2, simply to produce some margin room. And also I desire a photo to fit inside f2-child. The photo ought to be as broad as f2-child, yet its optimum elevation must coincide as f2-child.
It functions great when the viewport's size is reduced, yet when the size obtains greater, the photo would certainly overflow. I attempted establishing f2 as well as f2-child's max-height to 100%, yet it does not function.
