CODEWITHSUNDEEP
htmlcssreactjssassheight
lukeet
lukeet

Reputation: 511

How to make a div scale to the max height available?

I have a div filled with a an image contained within another div spanning the top and bellow it a p, I would like it so that the image portion('child') spans to the max-height available without pushing the text out of the div, is this possible?

example code:

Html:

<div className='parent'>
  <div className='child'>
    <img/>
    <p></p>
  </div>
</div>

Sass:

.parent{
 position: absolute;
        width: 85%;
        height: 85%;
        background: white;
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.2);
        margin-left: auto;
        margin-right: auto;
        margin-top: 20%;
        left: 0;
        right: 0;
        text-align: center;
        border-radius: 7px;
        overflow: hidden;
        background: #7510f7;

  .child{
           display: flex;
           width: 100%;
           background: #141c3a;
           height: 40vh;
           overflow: hidden;

    img{
           width: auto;
           height: auto;
           max-width: 100%;
           max-height: 100%;
           object-fit: cover;
           background-repeat: no-repeat;
           margin: auto;
    }
   
  }

  p{
      text-align: left;
      width: 95%;
      margin: auto;
      font-size: 0.9rem;
    }
}

Upvotes: 0

Views: 588

Answers (1)

Luke Storry
Luke Storry

Reputation: 6722

Currently as your child div has display: flex;, the img and p elements will be side-by side.

Adding flex-direction: column; to the child element might be what you want, see the below snippet (added border colours to tell elements apart)

.parent {
  width: 85%;
  height: 85%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20%;
  text-align: center;
  background: #7510f7;
  border: red 1px solid;
}

.child {
  display: flex;
  width: 100%;
  background: #141c3a;
  height: 40vh;
  border: orange 1px solid;
  flex-direction: column;
}

img {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  margin: auto;
  border: green 1px solid;
}

p {
  text-align: left;
  width: 95%;
  margin: auto;
  border: blue 1px solid;
}
<div class='parent'>
  <div class='child'>
    <img/>
    <p>Lorem ipsum</p>
  </div>
</div>

Update

Given your sandbox, here are the styles you need to add to get it how you want:

  .Cards {
    display: flex;
    flex-direction: column;

    .carousel-root{
      flex:1;
    }
    .carousel, .slider-wrapper, .slider {
      height: 100%;
    }

    .slide{
      display: flex;
      justify-content: center;
    }
}

Upvotes: 1

Related Questions