CSS text overflows padding when height is not set - css

Question

I'm encountering a problem when trying to pad a div with overflow: hidden with two child divs where the content overflows the bottom of the padding if the parent doesn't have a height set, despite a max-height being set. On top of that, using overflow: hidden on the child div causes it to act like it's display: inline-block where the content doesn't flow around its sibling that's float: left. Below is my example case.
Descriptive picture of example case
So my two main questions are, is there a way to achieve the child div (.content) growing until it reaches the max-height of the parent without overshooting, primarily so that the child div will be hidden by the parent's padding? And is overflow: hidden on .content supposed to cause .content to behave oddly when the text wraps or is that a bug?
.wrapper {
max-height: 150px;
/* height: 150px; /* Required for .content to get correct height. Why isn't max-height sufficient? */
overflow: hidden;
padding: 25px;
border: 1px solid #000;
}
.left {
float: left;
border: 1px solid #000;
}
.content {
/* height: 100%; /* Doesn't do anything if the parent has no height set. */
max-height: 150px; /* Resolves not being able to inherit the parent's height. */
overflow: hidden; /* <- Required to hide overflow text but causes odd text wrapping behavior. */
}
<div class="wrapper">
<div class="left">
Left
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam quam sit amet neque ullamcorper varius. Aliquam porta, nulla a accumsan laoreet, ipsum nibh rhoncus lectus, sit amet placerat nibh felis ut leo. Nam in turpis at felis rutrum euismod a a sem. Donec efficitur lorem non vehicula luctus. Nulla pulvinar ultrices blandit. Donec ipsum arcu, tempus nec vulputate quis, porta nec sapien. Curabitur pellentesque, felis ut suscipit sodales, risus arcu consequat odio, vel porta ligula leo et quam. Praesent quam nisi, eleifend non viverra non, molestie nec nulla. Curabitur vel scelerisque dui, facilisis tempus enim. Etiam ac scelerisque dui. Etiam pretium tortor ac dictum eleifend. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam ornare malesuada risus, sed iaculis tellus lacinia vitae. Vivamus ut rhoncus nisl. Pellentesque vel sapien diam. Duis id felis massa.
</div>
</div>
Edit:
I've realized I could move the max-height amount to the child div, but the text still wraps strangely due to the overflow: hidden rule. I want to believe that this is a bug, but I am not certain.

Answer 1

Try This:
.wrapper {
overflow: auto;
padding: 25px;
border: 1px solid #000;
}
.left {
float: left;
border: 1px solid #000;
}
.content {
display: block;
overflow: auto;
/* Required but causes inline-block behavior? */
}
::-webkit-scrollbar {
width: 0px;
background: transparent; /* make scrollbar transparent */
}
<div class="wrapper">
<div class="left">
Left
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam quam sit amet neque ullamcorper varius. Aliquam porta, nulla a accumsan laoreet, ipsum nibh rhoncus lectus, sit amet placerat nibh felis ut leo. Nam in turpis at felis rutrum euismod a a sem. Donec efficitur lorem non vehicula luctus. Nulla pulvinar ultrices blandit. Donec ipsum arcu, tempus nec vulputate quis, porta nec sapien. Curabitur pellentesque, felis ut suscipit sodales, risus arcu consequat odio, vel porta ligula leo et quam. Praesent quam nisi, eleifend non viverra non, molestie nec nulla. Curabitur vel scelerisque dui, facilisis tempus enim. Etiam ac scelerisque dui. Etiam pretium tortor ac dictum eleifend. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam ornare malesuada risus, sed iaculis tellus lacinia vitae. Vivamus ut rhoncus nisl. Pellentesque vel sapien diam. Duis id felis massa.
</div>
</div>