CSS 最大高度不起作用

Question

我想让一个容器自动扩展。 为此，我想使用 max-height 属性。 这是我的 html 结构

<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;
}

我希望文本字段的高度扩大。 但是，它不适用于设置最大高度。 容器不改变高度。 但是，当我设置最小高度时，会应用正确的高度。

任何想法如何实现这一目标？ 还有其他想法吗？

Answer 1

max-height设置元素的最大高度，如果它试图增长超过该大小。 min-height设置元素的最小高度，如果它试图增长到低于该尺寸。 在您的情况下，默认文本字段高度小于您指定min-height ，因此浏览器将增加它的高度以满足min-height约束。

那么如果可行的话，只使用min-height有什么问题呢？