I am looking for a solution where the inner div stays fully contained within the outer div, without overflowing and overlapping with the padding of the outer div. Here is a code sample that demonstrates the issue
.inner {
/* Overflow */
overflow-wrap: break-word;
word-break: break-all;
overflow: hidden;
color: white;
}
.outer {
width: 100px;
height: 100px;
display: inline-block;
background-color: black;
padding-top: 15px;
padding-bottom: 15px;
overflow: hidden
}<div class="outer">
<div class="inner">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since
</div> </div>I envision the layout to look like this: view image description here with the inner div being able to expand as needed.
Despite trying various overflow settings and using borders instead of padding, the inner div continues to overflow beyond the outer div boundaries.