javascript - 使 vbox 的高度达到 max-height 所需的高度

Question

我有一个 vbox，里面有描述。它有一个overflow:auto的风格。如果我没有在垂直盒子上设置高度，它会太短并且会用滚动条剪切内容。它变成大约 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";
    }
});