ilginç bir Problem css

.TaSx{overflow:auto;margin-top:7px;height:300px;white-space:nowrap;}
.TaSx>div div{border:solid 1px #aaa;width:22%;min-width:165px;display:inline-block;}
.TaSx>div div:last-child{min-width:165px;width:12%;}
#OgretmenUst{width:98%;margin:20px auto;}

<div id="OgretmenUst">
<div class="TaSx">
<div>
<div>Telefon Numaranız</div>--------
<div>Ders Adı</div>---------------
<div>Konu</div>-----------------
<div>Öğretmen Adı</div>--------
<div>Durum</div>-------------
</div>
<asp:Literal ID="Literal1" runat="server"></asp:Literal>

</div>
</div>


kodlarım yukarıdaki gibi şimdi sıkıntı şu Overflow-x doğru çalışmıyor. şöyleki
bu kodlarımı https://jsfiddle.net/ de deniyorum hiç bir sıkıntı yok. fakat kendi internet sitemde şöyle bir problem çıkıyor. sayafayı daraltmaya başladığımda yukarıda renkli olarak işaretlediğim divlerin toplam boyutuna geldiğinde sayfadaki diğer divleri itmeye başlıyor yani oluşması gereken scroll açılmıyor. Neden olabilir?lütfen yardımcı olun!! 8 saat uğraştım yapamadım. !!(renkli işaretlediğim divlere başka bir sitil etkilemiyor.kontrol ettim firefox geliştiriciden.)

OgretmenUst e position:relative; overflow-x:auto;height:800px;
TaSx e position:absolute;width:100%

yaparak doğru overflowun bir şekilde çalışmasını sağladım. fakat bu seferde söyle bir sıkıntı var benim yükseklik dinamik bundan dolayı sabit bir yükseklik vermem{height:800px;} eleman sayısı az olunca problem oluşturuyor. bunu nasıl giderebililirim.?
internnette araştırdığım bütün örneklerde conteiner(OgetmenUst) div e sadece overflow-x:auto; verildiğinde problemi çözüyorlarken bende neden çalışmıyor anlamış değilim.?

site adresinizi özelden pm atın yardımcı olayım hocam.

şuan sadece localde malasef aktif siteme eklemedim. ama teamweaver ile müsaitseniz göstermek isterim

skype: yakup_sener ekleyin teamda bir bakalım