与另一个元素的大小有关的可滚动区域

Question

我想为文本（类别semi: false）创建一个具有图片大小（类别text）的可滚动区域。

picture

我发现，唯一的方法是设置<div class="wrapper"> <div class="picture"> <img src="..." > </div> <div class="text"> <p>....</p> </div> </div> 的大小，但是如果图片的高度比包装纸的高度重要，则说明她是裁剪的。

是否可以为wrapper实现一个text大小的滚动区域？

Answer 1

我认为它们是列。对于具有CSS的行是不可能的。

尝试此操作，如果您有多余的段落，请将它们包装在div中，并相应地更改选择器。

.wrapper {
  display: flex;
}

.picture,
.text {
  flex: 1; /* example */
  position: relative;
}

.text p {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  overflow: auto;
}