Scrollable area related to the size of another element

user_7135569 0
Viewed 27

I want to create a scrollable area for the text (class text), who have the size of the picture (class picture).

<div class="wrapper">
    <div class="picture">
        <img src="..." >
    </div>
    <div class="text">
        <p>....</p>
    </div>
</div>

The only way, I have found is set the size for the wrapper but if the picture have height more importe than the wrapper, she is crop.

So make it's possible to realize a scroll area for text with the size of picture?

scroll scrollbar css
1 Answers

I assumed they are columns. Not possible for rows with CSS.

Try this, if you have extra paragraphs wrap them in a div and change the selector accordingly.

.wrapper {
  display: flex;
}

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

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