CSS max-height does not work

I want to make a container automatically expand. To do so I want to use max-height property. This is my html structure

<div class='palm-row first' style="max-height:200px">
     <div class="palm-row-wrapper">
           <div class="textfield-group" x-mojo-focus-highlight="true"
                style="max-height:200px">
               <div class="title">  
                <div class="truncating-text" id="nameField" class="recipient-picker"
                 x-mojo-element="TextField" style="max-height:200px"></div>
               </div>
        </div>
    </div>
</div>

.recipient-picker{
    overflow:hidden; 
    margin-right:0px;
    max-width:300px;
    padding-right: 4px;
}

I want the textfield to expand 开发者_运维百科in height. However it does not work settings max-height. The container do not change height. However when I set min-height, the correct height is applied.

Any ideas how to achieve this? Any other ideas?

max-height sets the maximum height of an element if it tries to grow past that size. min-height sets the minimum height of an element if it tries to grow below that size. In your case, the default textfield height is less than your specified min-height, so the browser will increase it's height so that the min-height constraint is satisfied.

So what's the problem with just using min-height if it works?