Limit CSS 'resize: both' to bounding box

Question

I want to have an resizable element inside an other, larger element that acts as a bounding box. So one can only resize the inner element to the size of the outer element. Please see my code snippet below:

div {
  background-color: grey;
  width: 300px;
  height: 300px;
}

p {
  margin-left: 50px;
  width: 200px;
  height: 200px;
  max-width: 300px;
  max-height: 300px;
  background-color: white;
  overflow: scroll;
  resize: both;

}

<div>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel neque nec magna lacinia commodo in vel ante. Aliquam tincidunt, purus sit amet congue placerat, lacus mauris rhoncus nisl, nec ornare libero purus eget augue. In sed dui placerat nisl cursus aliquet. Integer nisl lorem, maximus et viverra non, aliquet vel arcu. Cras ullamcorper, arcu id molestie scelerisque, est turpis interdum mauris, sit amet pretium mi lectus at metus. Phasellus ornare odio in ipsum faucibus, et tempus est porttitor. Nullam sollicitudin eleifend mi at semper. Vivamus vel neque nec magna lacinia commodo in vel ante. Aliquam tincidunt, purus sit amet congue placerat, lacus mauris rhoncus nisl, nec ornare libero purus eget augue.</p>
</div>

Can anyone help? Thanks!

Edit: Just setting max-width in the inner element won't work for me because the inner element could be anywhere inside the outer element.

Answer 1

div {
  background-color: grey;
  width: 300px;
  height: 300px;
}

p {
  width: 200px;
  height: 200px;
  max-width: 300px;
  max-height: 300px;
  background-color: white;
  overflow: scroll;
  resize: both;
}

<div>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel neque nec magna lacinia commodo in vel ante. Aliquam tincidunt, purus sit amet congue placerat, lacus mauris rhoncus nisl, nec ornare libero purus eget augue. In sed dui placerat nisl cursus aliquet. Integer nisl lorem, maximus et viverra non, aliquet vel arcu. Cras ullamcorper, arcu id molestie scelerisque, est turpis interdum mauris, sit amet pretium mi lectus at metus. Phasellus ornare odio in ipsum faucibus, et tempus est porttitor. Nullam sollicitudin eleifend mi at semper. Vivamus vel neque nec magna lacinia commodo in vel ante. Aliquam tincidunt, purus sit amet congue placerat, lacus mauris rhoncus nisl, nec ornare libero purus eget augue.</p>
</div>

If you add max-height and max-width to the parent element, then the inner element will be resizable up to the parent's height and width.