让div在不使用javascript的情况下与溢出的图像高度相匹配？

Question

我这里显示的代码： https ://codepen.io/allen-houng/pen/ExYKYdq

这里有一个要点：

<div class="parent">
 <div class="imageWrapper">
  <img class="image" src="imageurl" />
  </div>
  <div class="textWrapper">
   ...lots of text
  </div>
</div>

父级是一个弹性盒子，两个子级是弹性子级。如果内容超出高度，是否有办法让 textWrapper div 与图像的高度匹配，同时滚动（不使用 javascript？）

预期结果：

实际结果：

Answer 1

首先设置.parent display: flex以使列具有相同的高度，

然后设置.textWrapper列overflow: auto; position: relative

添加.inner-text子元素position: absolute;

.parent {
    display: flex;
}

.textWrapper {
    position: relative;
    overflow: auto;
}

.textWrapper .inner-text{
    position: absolute;
}

这里是完整的例子：

.parent {
    display: flex;
}

.textWrapper {
    position: relative;
    overflow: auto;
}

.textWrapper .inner-text{
    position: absolute;
}

.parent {
    width: 620px;
    display: flex;
}

.imageWrapper {
    width: 100%;
    flex: 1;
}

.image {
    width: 100%;
    display: block;
    background:  linear-gradient(red, yellow, green);
    height: 205px;

}

.textWrapper {
    flex: 1;
    background: purple;
    color: white;
    position: relative;
    overflow: auto;
}

.inner-text {
    position: absolute;
}