Combine Bootstrap columns and FlexBox

Question

I got some mixed concepts right here. What Im trying to achieve is, in a set of bootstrap containers, combine flexbox with bootstrap columns and make the last images ("img-team") resize according to his containers. They are resizing according to width but not to height. When is height what exceed the container just get bigger. What´s happening in the HTML is that one big container set the height property. Then in the subdivs, the space is dividing up according to flex-grow:1 or not flex:0.

DRAW OF PRETENDED I want the image to adapt that div, not to change the height of the big orange container. Its currently working but not with height increment, just for width increment.

HTML

.img-team {
  overflow: hidden;
  height: 100%;
  width: 100%;
}

<div class="container-fluid" style="display:flex; flex-flow: column; flex: 0 0 50vh">
  <div class="container-fluid" style="display:flex; flex-flow: column; flex-grow: 1">
    <div>
      <h4 class="">TITLE</h4>
    </div>
    <div class="row" style="display:flex; flex-grow: 1">
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="display:flex; flex-grow: 1; flex-flow: column">
        <div style="display:flex; flex-grow: 1; flex-shrink: 1; flex-basis: 0">
          <img class="img-team" src="img/team-1.jpg" href=""></img>
        </div>
        <div>
          <h4 class="xxx">Walter White</h4>
          <h4 class="xxx">More text</h4>
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="display:flex; flex-grow: 1; flex-flow: column">
        <div style="display:flex; flex-grow: 1">
          <img class="img-team" src="" href=""></img>
        </div>
        <div>
          <h4 class="xxx">Walter White</h4>
          <h4 class="xxx">More text</h4>
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="display:flex; flex-grow: 1; flex-flow: column">
        <div style="display:flex; flex-grow: 1">
          <img class="img-team" src="" href=""></img>
        </div>
        <div>
          <h4 class="xxx">Walter White</h4>
          <h4 class="xxx">More text</h4>
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="display:flex; flex-grow: 1; flex-flow: column">
        <div style="display:flex; flex-grow: 1">
          <img class="img-team" src="" href=""></img>
        </div>
        <div>
          <h4 class="xxx">Walter White</h4>
          <h4 class="xxx">More text</h4>
        </div>
      </div>
    </div>
  </div>
</div>

1. With no image. Everything fit and goes well.

2. With image. Contain doesnt fit anymore (only fit width not height). Thats why I think its cause of the image.

Answer 1

I'm not quite sure what you are trying to achieve, but this might help:

1. Check the styles for div .img-team-wrap, it's a wrapper div for images with padding-top, in this case it's 100% to maintain the aspect ratio of the DIV 1:1 you can find more about it here
2. than use the styles from .img-team for the images to center it inside the div.
3. Also add flex: 1 and justify-content: flex-end;. to each column, I think this solves the issue.

html,
body {
  margin: 0;
  padding: 0;
}

.page {
  display: flex;
}

.top-content,
.team-wrap {
  height: 50vh;
}

.team-wrap>div {
  flex: 1;
  justify-content: flex-end;
}

.img-team-wrap {
  padding-top: 100%; /* 1:1 Aspect Ratio */
  position: relative; /* For Positioning Image Inside */
  overflow: hidden;
}

.img-team {
  overflow: hidden;
  height: 101%;
  width: 101%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -o-object-fit: cover;
  object-fit: cover;
}

<div class="page">
  <div class="container-fluid" style="display:flex; flex-flow: column; flex: 0 0 100%">
    <div class="container-fluid" style="display:flex; flex-flow: column; flex-grow: 1">
      <div class="top-content">
        <h4 class="">TITLE</h4>
      </div>
      <div class="row team-wrap" style="display:flex; flex-grow: 1">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="display:flex; flex-grow: 1; flex-flow: column">
          <div class="img-team-wrap" style="display:flex; flex-grow: 1;">
            <img class="img-team" src="https://sparkwebservices.com/img/ww-1.jpg" />
          </div>
          <div>
            <h4 class="xxx">Walter White</h4>
            <h4 class="xxx">More text</h4>
          </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="display:flex; flex-grow: 1; flex-flow: column">
          <div class="img-team-wrap" style="display:flex; flex-grow: 1">
            <img class="img-team" src="https://sparkwebservices.com/img/ww-2.jpg" />
          </div>
          <div>
            <h4 class="xxx">Walter White</h4>
            <h4 class="xxx">More text</h4>
          </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="display:flex; flex-grow: 1; flex-flow: column">
          <div class="img-team-wrap" style="display:flex; flex-grow: 1">
            <img class="img-team" src="https://sparkwebservices.com/img/ww-3.jpg" />
          </div>
          <div>
            <h4 class="xxx">Walter White</h4>
            <h4 class="xxx">More text</h4>
          </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="display:flex; flex-grow: 1; flex-flow: column">
          <div class="img-team-wrap" style="display:flex; flex-grow: 1">
            <img class="img-team" src="https://sparkwebservices.com/img/ww-1.jpg" />
          </div>
          <div>
            <h4 class="xxx">Walter White</h4>
            <h4 class="xxx">More text</h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>