Width of element not increasing to max-width - html

Question

In the snippet below, I have assigned a max-width of 400px to the tooltip. It width it has is much less than that. Why doesn't the tooltip have 400px width?
I do not want to explicitly assign it 400px as width because if the content is low, it should have 120px as the width (which is the min-width).
body {
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
}
.select {
position: relative;
height: 30px;
background: black;
color: white;
padding: 10px 20px;
line-height: 30px;
}
.tooltip {
display: none;
}
.tooltip:after {
position: absolute;
bottom: 100%;
left: 100%;
margin-bottom: 30px;
margin-left: -20px;
display: block;
content: attr(title);
background: red;
color: white;
line-height: 16px;
font-size: 14px;
padding: 12px;
min-width: 120px;
max-width: 400px;
}
.tooltip:before {
position: absolute;
bottom: 100%;
left: 100%;
content: '';
height: 0;
width: 0;
border-top: 6px solid red;
border-bottom: 6px solid transparent;
border-left: 9px solid red;
border-right: 9px solid transparent;
margin-left: -20px;
margin-bottom: 21px;
}
.tooltip.active {
display: block;
}
<div class="select">
<div class="tooltip active" title="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora quam, voluptatem aliquam quos, soluta nostrum repellat unde magni voluptatibus placeat vitae numquam voluptatum ab temporibus id illo. Voluptatem, iusto, incidunt?"></div>
I have a tooltip
</div>