The parent div's width did not exceed the value set in its max-width property. How to get child to inherit the actual width of the parent and not cause the parent to increase its width?
I'm sorry but I didn't really understand the question, but I think what you are searching for is this:
.parent-el {
max-width: 100px;
width: 50px;
border: 3px solid black;
}
.child-el {
height: 100px;
width: 100%;
background-color: red;
}<html>
<div class="parent-el">
<div class="child-el"></div>
</div>
</html>