如何将 div 缩放到可用的最大高度？

Question

我有一个 div 填充了一个包含在另一个 div 中的图像跨越顶部并在它下面是一个 p，我想要它以便图像部分（'child'）跨越可用的最大高度而不将文本推出 div，这可能吗？

示例代码：

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;
    }
}

Answer 1

目前，由于您的 child div 有 display: flex;，img 和 p 元素将在 side-by 侧。

将 flex-direction: column; 添加到 child 元素可能是您想要的，请参见下面的代码片段（添加边框颜色以区分元素）

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

更新

鉴于您的沙箱，您需要添加以下样式才能获得所需的样式：

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

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

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

如何将 div 缩放到可用的最大高度？

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

html

css

height

sass

reactjs

更新