How to give a max-height to flex-direction column?

November 9, 2021

I want to give a max-height to the flex-box when below 700px. I tried overflow:hidden which shows that max-height is working but I’m not able to figure out why it isn’t being applied. How can I achieve it?
Any help is much appreciated.

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
.inner-div{
  display: flex;
  max-height: 250px;
}
.img-container{
  flex:1;
}

img{
  width:100%;
  height: 100%;
  object-fit: cover;
  flex:1;
  display: block;
}
.text{
  background: silver;
  padding: 2em;
  flex:1;
}
@media only screen and (max-width: 700px) {
  .inner-div{
    flex-direction: column;
  }
}

<div class="outer-div">
  <!-- child div below -->
  <div class="inner-div">
    <div class="img-container">
      <img src="https://images.ctfassets.net/hrltx12pl8hq/3AnnkVqrlhrqb9hjlMBzKX/693a8e5d40b4b6c55a7673ca4c807eef/Girl-Stock?fit=fill&w=480&h=270" />
    </div>
    <div class="text">
      <h2>hello</h2>
      <h3>subheading</h3>
    </div>
  </div>
</div>

>Solution :

The problem come from your image. You should add overflow:hidden; to your image container.

After if you want to align your image, you can simply add display: flex; align-items: center; to your .img-container.

So add to your media query:

/* ADDED */
  .img-container{
    overflow:hidden;
    display: flex;
    align-items: center;
  }

DEMO

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
.inner-div{
  display: flex;
  max-height: 250px;
}
.img-container{
  flex:1;
}

img{
  width:100%;
  height: 100%;
  object-fit: cover;
  flex:1;
  display: block;
}
.text{
  background: silver;
  padding: 2em;
  flex:1;
}
@media only screen and (max-width: 700px) {
  .inner-div{
    flex-direction: column;
  }
  /* ADDED */
  .img-container{
    overflow:hidden;
    
    display: flex;
    align-items: center;
  }
}

<div class="outer-div">
  <!-- child div below -->
  <div class="inner-div">
    <div class="img-container">
      <img src="https://images.ctfassets.net/hrltx12pl8hq/3AnnkVqrlhrqb9hjlMBzKX/693a8e5d40b4b6c55a7673ca4c807eef/Girl-Stock?fit=fill&w=480&h=270" />
    </div>
    <div class="text">
      <h2>hello</h2>
      <h3>subheading</h3>
    </div>
  </div>
</div>