Como colocar heght automatico em OL

Boa tarde, estou com um problema que não consigo resolver, estou alterando o checkout de uma loja virtual magento, para isto usei um código CSS pronto, após colocar  o código, fui mecher manualmente na altura do <ol> que compoem o checkout, que começa assim:

	 

<ol class="opc" id="checkoutSteps">
 <li id="opc-billing" class="section allow">
 <div class="step-title">
 <span class="number">1</span>
 <h2>Informações de Contato</h2>
 <a href="#">Editar</a>
 </div>
 <div id="checkout-step-billing" class="step a-item" style="display:none;">
 <form id="co-billing-form" action="">
<fieldset>
 <ul class="form-list">
 <li class="wide">...

	![imagem](https://forum.imasters.com.br/monthly_2018_01/5a591334ce6c0_Screenshot-2018-1-12FecharPedido-PacoEsportes.png.f00de7c477f80c3615ae200f44047146.png)

	 

	Na imagem acima, o <ol> é referente a  parte laranja claro, e o <li> a parte cinza claro.

	 

	Eu consigo colocar normalmente um height se for com valores padrões (100px, 200px, etc), mas se tento colocar auto, ele fica como na imagem abaixo:

	![5a59144c65c54_Screenshot-2018-1-12FecharPedido-PacoEsportes(1).png.5025c115d08e2748668b2e5e5adadf13.png](https://forum.imasters.com.br/monthly_2018_01/5a59144c65c54_Screenshot-2018-1-12FecharPedido-PacoEsportes(1).png.5025c115d08e2748668b2e5e5adadf13.png)

	 

	a parte do li é tampada.

	 

	se coloco um valor maior para o height, fica com um grande espaço vago pra baixo, se coloco  um  tamanho menor que o próximo passo, pare o checkout é sobreposto, como na imagem abaixo:

	![5a59155eb55b9_Screenshot-2018-1-12FecharPedido-PacoEsportes(2).png.701ee4b19fc908b0716219c9446a5586.png](https://forum.imasters.com.br/monthly_2018_01/5a59155eb55b9_Screenshot-2018-1-12FecharPedido-PacoEsportes(2).png.701ee4b19fc908b0716219c9446a5586.png)

	 

	como posso resolver este problema, para que a parte de dentro não seja sobreposta?

	 

	Obrigado desde já.

	 

	Att,

	 

	Marcelo