html - 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 有什么问题呢？