Выравнивание прокрутки переполнения по высоте изображения

Question

немного нуб здесь, но надеюсь, кто-то может помочь.У меня есть изображение левой стороны, которое занимает 2/3 элемента div во Flexbox, и текстовое поле div с правой стороны, которое занимает 1/3.

Как мне получить элемент правой стороны, чтобы следоватьвысота изображения с левой стороны, чтобы прокрутка переполнения заканчивалась на одной линии с нижней частью изображения, даже при изменении размера окна просмотра.

Мой текущий код ниже, но это выглядит нормально только для одного размера.

Ценю любые отзывы.

Ричард

approach-wrapper {
  display: flex;
   margin-bottom: 2%;
}

.approach-wrapper img { 
 width:100%;
}

.approach-wrapper .section-left {
 width: 66%;
 height: 100%;
}

.approach-wrapper .section-right {
  width: 34%;
  height:605px;
  padding-left: 2%;
  overflow:auto;
 }
 
.approach-wrapper:after {
  content: "";
  display: table;
  clear: both;
}

<div class="approach-wrapper">
	<div class="section-left">
		<img alt="test" src="img/picture.jpg" /> </div>
	<div class="section-right approach-content">
		<p>Loads of text12345678910<br>Loads of text12345678910<br>Loads of text12345678910<br>
		Loads of text12345678910<br>Loads of text12345678910<br>Loads of text12345678910<br>
		Loads of text12345678910<br>Loads of text12345678910<br>Loads of text12345678910<br>
		Loads of text12345678910<br>Loads of text12345678910<br>Loads of text12345678910<br>
		<br><br><br><br><br><br><br><br><br><br><br><br>Loads of text12345678910<br>
		Loads of text12345678910<br>Loads of text12345678910<br>Loads of text12345678910<br>
		Loads of text12345678910<br>Loads of text12345678910<br>Loads of text12345678910<br>
		Loads of text12345678910<br>Loads of text12345678910<br>Loads of text12345678910<br>
		Loads of text12345678910<br>Loads of text12345678910<br></p>
	</div>
</div>

Answer 1

была ошибка в вашей css (.) Точка отсутствует для класса approach-wrapper в вашем css, а также я удалил высоту для left и right class, так как нетпотребность в высоте.

.approach-wrapper {
  display: flex;
  margin-bottom: 2%;
}

.approach-wrapper img {
  width: 100%;
}

.approach-wrapper .section-left {
  width: 66%;
}

.approach-wrapper .section-right {
  width: 34%;
  padding-left: 2%;
  overflow: auto;
}

.approach-wrapper:after {
  content: "";
  display: table;
  clear: both;
}

<div class="approach-wrapper">
  <div class="section-left">
    <img alt="test" src="img/picture.jpg" /> </div>
  <div class="section-right approach-content">
    <p>Loads of text12345678910<br>Loads of text12345678910<br>Loads of text12345678910<br> Loads of text12345678910<br>Loads of text12345678910<br>Loads of text12345678910<br> Loads of text12345678910<br>Loads of text12345678910<br>Loads of text12345678910<br>      Loads of text12345678910<br>Loads of text12345678910<br>Loads of text12345678910<br>
      <br><br><br><br><br><br><br><br><br><br><br><br>Loads of text12345678910<br> Loads of text12345678910<br>Loads of text12345678910<br>Loads of text12345678910<br> Loads of text12345678910<br>Loads of text12345678910<br>Loads of text12345678910<br>      Loads of text12345678910<br>Loads of text12345678910<br>Loads of text12345678910<br> Loads of text12345678910<br>Loads of text12345678910<br></p>
  </div>
</div>