Изменение размера родительского div в соответствии с его дочерним div

Question

Я очень плохо разбираюсь в CSS. Я хочу изменить размер родительского div на основе высоты дочернего div. Ниже мой html-код.

<div id="mainPanel" class="tabPanel"> 
    <div class="ui-corner-all ui-widget-content grid_container" style="padding: 5px; margin: 5px; text-align: left;"> 
     <div align="left"> 
      <div id="subTabs" style="width:500px"> 
       <div class="ui-layout-content"> 
        <div id="Form1"> 
        </div> 

        <div id="Form2"> 
        </div> 
       </div> 
      </div> 
     </div> 
     </div> 
    </div> 

Внутри form1 и form2 div's Я динамически заполняю компоненты, которые могут вырасти до любой высоты. Я пытался с переполнением: auto во всех родительских div, но не повезло. Любая помощь будет действительно оценена.

Answer 1

Родитель всегда изменяет размер до размера детского пространства, если не объявлено ничего. Если вы установили фиксированную высоту, разные браузеры будут вести себя по-разному, некоторые расширят, некоторые скрываются, а другие будут прокручиваться. Вы можете просто исправить это либо , меняя height на min-height, либо удалите заявление height.

Answer 2

Я думаю, что вам не нужно ничего делать, чтобы родительский DIV был так же высоко, как блоки детей. Может быть, есть что-то не так со скриптом ...

Если некоторые дети парит, попробуйте overflow:hidden; с родительским DIV или другой «ясно исправить» CSS трюк ...