Kapsayıcı div, çocuk div (fit olmadan) için genişletmez

Question

Kapsayıcı div'um, en üst: 20px değerine sahip olan çocuk div'una sığacak şekilde genişletilmez. Şamandıralarım bile yoktu ve taşmayı da kullandım: gizli (alt öğenin parçasını keser) veya taşma: otomatik (kaydırma çubukları oluşturur). Codepen

<div class="container"> 
<div id="model">fdsf</div> 
</div> 

bu soruna bir çözüm takdir:

codepen örneğe bakın.

Answer 1

Kaldır top ve position özellikleri ve örnekte margin: 10px auto 0 auto;

#model { 
    background: yellow; 
    border: 1px solid orange; 
    width: 100px; 
    height: 100px; 
    margin: 10px auto 0 auto; 
    display: block; 
} 

Demo

Answer 2

1), konteyner çocuğun doğru div uyacak şekilde genişlemektedir kullanın. Çocuğun yüksekliği 100px artı 1px'in iki katıdır, toplamda 102px'dir. Ardından, herhangi bir tarayıcıdaki geliştirici araçları size anlatabileceğinden, kabın yüksekliği tam olarak 102 pikseldir.

İçeriğin yüksekliği toplam 102 pikseldir, bu nedenle kabın iç yüksekliği 102 pikseldir. Bu, "içeriğe uymak için genişlemek" tanımıdır.

2) Şimdi, çocuğunuzun div için position: relative ayarlıyorsunuz. Aşağıdaki alıntı Mozilla Developer Network'dan örneğinizde olup bitene tam bir açıklama yapmalıdır.

relatif konum:

Bu anahtar elemanı için bir boşluk düzenini değiştirmek (ve dolayısıyla çıkmadan, eleman yerleştirilmemiş gibi tüm unsurları ortaya koyar, ve daha sonra elemanın konumunu ayarlamak nerede 'un konumlandırılmamış olması gerekirdi). Konumun etkisi: tablosu - * - grubu, tablo satırı, tablo sütunu, tablo hücresi ve tablo başlığı öğelerinde göreli olarak tanımsızdır.

3) Açıkçası, göreceli konumlandırma kurtulmak ve sadece yerine margin kullanarak alma yoluyla bu etkinin kurtulabilirsiniz. Yorumunuz ile ilgili olarak, top, right, bottom ve left kesinlikle işe yaramaz. Yukarıdaki sözlerin açıkladığı gibi, tamamen farklı bir şey için kullanılmaları amaçlanıyor.