Прокручиваемая область, связанная с размером другого элемента

Question

Я хочу создать прокручиваемую область для текста (класс text), у которого есть размер картинки (класс picture).

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

Единственный способ, который я нашелустанавливается размер для wrapper, но если картинка имеет более высокую высоту, чем обертка, она обрезается.

Так что можно реализовать область прокрутки для text с размером picture

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