我怎样才能收缩图像以适应父母设定高度内的所有弹性孩子

Question

Is it possible to shrink the middle image (using flex-box) such that when the content in header , footer grows it shrinks such that the total content height of flex children ( header , footer , img-wrap ) does not overflow out of parent container?

Current view of layout in CodePen

Any help is appreciated. Thanks.

 * { box-sizing: border-box; } p, h4 { margin: 0; }.wrapper { display: flex; flex-direction: column; width: 200px; height: 200px; border: 1px solid red; border-radius: 5px; }.wrapper.header, .wrapper.footer { flex-grow: 1; flex-shrink: 0; }.header { background: lightskyblue; }.img-wrap { border: 1px solid black; flex-grow: 0; flex-shrink: 3; min-height: auto; }.img-wrap img { max-width: 100%; width: 100%; width: auto; height: 100%; height: auto; vertical-align: bottom; }.footer { border: 1px solid green; }.footer.btn { display: block; width: 95%; margin: 0 auto; padding: 10px; }

 <div class="wrapper"> <div class="header"> <h4>Box title</h4> <p>Some blurb text Some blurb text Some blurb text Some blurb text </p> </div> <div class="img-wrap"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShS9EkKjqdM_u5LKC2rI_Utrc0lVvWy5-krg&usqp=CAU" alt=""> </div> <div class="footer"> <button class="btn">My button</button> </div> </div>

Answer 1

I don't often resort to absolute positioning, but it works here on the image container, which is now inside the flex child. Note that non-static positioning must be set on the parent element as well.

Also, instead of wrestling with flex-grow and -shrink values, I just use flex: auto and flex: none on the various flex children. It isn't necessary to use it in all cases, but it makes the layout's behavior more intuitive to me when I see it in the CSS.

 * { box-sizing: border-box; } p, h4 { margin: 0; }.wrapper { display: flex; flex-direction: column; width: 200px; height: 200px; border: 1px solid red; border-radius: 5px; }.wrapper.header, .wrapper.footer { flex: none; }.header { background: lightskyblue; }.content { border: 1px solid black; flex: auto; position: relative; }.img-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; }.img-wrap img { max-width: 100%; max-height: 100%; vertical-align: bottom; }.footer { flex: none; border: 1px solid green; }.footer.btn { display: block; width: 95%; margin: 0 auto; padding: 10px; }

 <div class="wrapper"> <div class="header"> <h4>Box title</h4> <p>Some blurb text Some blurb text Some blurb text Some blurb text </p> </div> <div class="content"> <div class="img-wrap"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShS9EkKjqdM_u5LKC2rI_Utrc0lVvWy5-krg&usqp=CAU" alt=""> </div> </div> <div class="footer"> <button class="btn">My button</button> </div> </div>

Answer 2

You may use display: grid for this one.

Check the object-fit: cover; for the image so that it doesn't squeeze and with this solution, the image stays centered and isn't just cut below.

Does this work with my pen? https://codepen.io/maki3000/pen/BamgxaB?editors=1100

 * { box-sizing: border-box } p, h4 { margin: 0; }.wrapper { display: grid; grid-template-rows: 1fr minmax(10px, auto) 1fr; width: 200px; height: 200px; border: 1px solid red; border-radius: 5px; }.header { background: lightskyblue; }.img-wrap { border: 1px solid black; width: 100%; height: 100%; }.img-wrap img { width: 100%; height: 100%; object-fit: cover; }.footer { border: 1px solid green; }.footer.btn { display: block; width: 95%; margin: 0 auto; padding: 10px; }

 <div class="wrapper"> <div class="header"> <h4>Box title</h4> <p>Some blurb text Some blurb text Some blurb text Some blurb text </p> </div> <div class="img-wrap"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShS9EkKjqdM_u5LKC2rI_Utrc0lVvWy5-krg&usqp=CAU" alt=""> </div> <div class="footer"> <button class="btn">My button</button> </div> </div>

Answer 3

Check the updates in the code:

 * { box-sizing: border-box; } p, h4 { margin: 0; }.wrapper { display: flex; flex-direction: column; width: 200px; height: 200px; border: 1px solid red; border-radius: 5px; }.wrapper.header, .wrapper.footer { flex-grow: 1; flex-shrink: 0; }.header { background: lightskyblue; }.img-wrap { border: 1px solid black; flex-grow: 0; flex-shrink: 3; min-height: 0; /* 0 instead of auto */ }.img-wrap img { width: 100%; height: 100%; object-fit: contain; /* use object fit */ }.footer { border: 1px solid green; }.footer.btn { display: block; width: 95%; margin: 0 auto; padding: 10px; }

 <div class="wrapper"> <div class="header"> <h4>Box title</h4> <p>Some blurb text Some blurb text Some blurb text Some blurb text </p> </div> <div class="img-wrap"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShS9EkKjqdM_u5LKC2rI_Utrc0lVvWy5-krg&usqp=CAU" alt=""> </div> <div class="footer"> <button class="btn">My button</button> </div> </div>