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

我希望文本字段的高度扩展。但是它不起作用设置max-height。容器不会改变高度。但是，当我设置最小高度时，会应用正确的高度。

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

Answer 1

如果元素尝试超过该大小，则

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

那么只要使用min-height它有什么问题呢？

CSS max-height不起作用

1 个答案: