vbox의 높이를 최대 높이까지 올려야합니다.

Question

vbox에 설명이있는 vbox가 있습니다. 그것은 overflow : auto의 스타일을 가지고 있습니다. vbox에 높이를 설정하지 않으면 너무 짧아서 스크롤 막대를 사용하여 내용을 잘라냅니다. 모든 것을 보여주기 위해서는 150px가 필요한 약 50px가됩니다. 명시적인 높이를 설정하면 그 높이가되지만 명시적인 높이를 설정하고 싶지는 않습니다. 최대 높이를 설정하면 너무 짧아서 스크롤 막대를 사용하여 내용을 잘라냅니다.

높이가 최대 높이 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

당신이 min-height:200px;를 사용하여 시도 적이 있습니까? 내부 콘텐츠가 더 작더라도 요소의 크기가 최소 200 픽셀 이상이어야합니다.

Answer 2

XUL은 HTML과 똑같은 동작을하지 않습니다. 어떤 자바 스크립트 속임수에 의지하지 않고 같은 효과를 내기위한 어떤 방법이 있는지는 알지 못합니다.

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