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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

maybe controling the image max-height can help

@media only screen and (max-width: 700px) {
    .inner-div {
        flex-direction: column;
    }

    .img-container>img {
        max-height: 200px;
    }
}

CodePudding user response：

You need to apply max-height to .img-container as it don't get a height value when flex is column while both text and image get that value in flex: row

.img-container {
   flex: 1;
   max-height: 250px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.inner-div {
  display: flex;
  max-height: 250px;
}

.img-container {
  flex: 1;
  max-height: 250px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  flex: 1;
  display: block;
  opacity: 0;
}

.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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>