Question

我有一个内置描述的vbox。它有溢出的风格：自动。如果我在vbox上没有设置高度，则它太短并且使用滚动条剪切内容。它变成大约50px，需要150px才能显示所有内容。如果我设置了一个明确的高度，它就变成了那个高度，但我不想设置一个明确的高度。如果我设置了最大高度，它仍然太短并且使用滚动条剪切内容。

我希望它不会切断任何东西，除非高度超过最大高度400px。怎么办呢？

这是标记：

<vbox flex="1" align="center">
   <image src='chrome://dfsdf/skin/sdf.svg' width='100px' />
   <label class="header" value="An Exception Has Occurred"/>
   <!-- the following should be as tall as needed as with no scroll bars long as it is less than 200px, if longer than 200px, make it 200 and add scroll bars -->
   <vbox flex="1" class="ErrorMessageWrapper">
      <description id="ExceptionDescription">
         The exception should appear here.
      </description>
   </vbox>
   <label value="Trace"/>
   <!-- the following should be as tall as needed as with no scroll bars long as it is less than 400px, if longer than 400px, make it 400 and add scroll bars -->
   <vbox flex="1" class="ErrorMessageWrapper">
      <description id="ExceptionTrace">
         The exception trace should appear here.
      </description>
   </vbox>
   <hbox  class="FieldWrapper" pack="right" align="right" flex="0">                   
         <button label="Try Again" class="Button" oncommand="RetryConnection();" />
   </hbox>
</vbox>

CSS：

.ErrorMessageWrapper{
   border:1px solid #070707;
   background:#141414;
   padding:20px;
   padding-bottom:11px;
   margin-bottom:20px;
   width:700px;
   overflow:auto;
   max-height:400px; /* Does nothing! */
}

Answer 1

XUL的行为与HTML完全不同。我没有意识到有任何方法可以实现相同的效果，而不诉诸一些Javascript技巧，有些东西：

addEventListener("load", function() {
    // After the text has been set...
    let box = document.getElementById("ExceptionTraceWrapper");
    if (box.boxObject.height > 400) {
        box.style.height = "400px";
        box.style.overflow = "auto";
    }
});

Answer 2

您是否尝试过使用min-height:200px;？即使内部的内容较小，它也会强制元素的大小至少为200px。

使vbox尽可能高达最大高度

2 个答案: