CSS — min-content & max-content & fit-content Nedir?

Tahsin Safa Elmalı
3 min readJul 2, 2022

Bir HTML elemanının genişlik (width) değerini tanımlayabileceğimiz pek çok yol vardır. Örneğin:

Width değeri auto olan bir elemanı sayfada kullandığımızda, eleman yatay konumda uygun olan tüm genişlik kadar uzar.

(Örnekleri JSFiddle üzerinden paylaşıyor olacağım. Results kısmından çıktılarına bakabilirsiniz)

Burada width değerini 2 farklı şekilde belirleyebiliriz:

  1. Measurements değerler (100%,200px, 5rem gibi)
  2. Keywords (auto, min-content, max-content, fit-content)

Bir elemanın width ve height CSS özelliklerine değer atamamıza extrinsic sizing denmektedir. (auto, 100px, 100%,1rem gibi)

Bir elemana, extrinsic sizing uyguladığımızda, örneğin measurement bir değer ile genişliğini sınırlandırdığımızda, içerisindeki content’in overflow olmasına sebep olabiliriz.

Kapsayıcı elemana parent dersek;

Parent’ın içerisindeki content’in, parent’ın boyutunu belirlemesine Intrinsic sizing/value denmektedir. Keyword değerlerden min-content, max-content ve fit-content’i kullanarak intrinsic değerler atamış oluruz. Bu değerlerin her birinin ne işe yaradığıma ve overflow sorununu nasıl çözebileceğimize bir bakalım.

min-content

Bir parent elemanın width değerini min-content olarak ayarladığımızda, içerisinde bulunan child content’e göre parent genişliğinin olabildiğince küçük olmasını sağlarız.

Yukarıdaki örneğimizi düzenleyecek olursak eğer;

Yukarıdaki örneğimizde parent container’ın içerisinde bulunan content’in en uzun kelimesi, parent’ın genişliğini belirlemiş oldu.

Use Case

min-content’i figure elemanları için kullanılabiliriz.

Figure elemanı bir block-level elemandır. Block-level eleman olduğu için, eleman yatayda uygun olan tüm genişliği kapsar. Bu yüzden figure elemanının altına eklemiş olduğumuz figcaption, uygun olan genişliğe göre yatayda uzar.

Figure elemanının width özelliğine min-content değerini verdiğimizde, figcaption elemanının content’i, sadece figure elemanın genişliği kadar genişliğe sahip olabilir.

max-content

max-content tamament zıt strateji ile çalışmaktadır. Parent container’ın genişlik değeri, içindeki contentin uzunluğuna bağlıdır.. Overflow olan örnekte, parent’ın width değerine max-content değerini verelim:

Görebileceğiniz gibi parent container, içerisindeki content kadar genişlemiş oldu.

fit-content

fit-content, min-content ve max-content’te olduğu gibi container’ın width değeri, içindeki elemanın boyutuna bağlıdır.

Parent container içerisindeki content, container’a sığıyorsa width değeri max-content gibi davranır. Sayfayı küçülttüğümüz zaman parent’ın uzayabileceği uygun bir genişlik kalmadığında, width değeri auto gibi davranır. Asla uygun olmayan alanın dışına çıkmaz.

  • fit-content Flexbox ve Grid için çalışmamaktadır.

min-content, max-content ve fit-content’in use case örneklerini şuradan inceleyebilirsiniz:

Bu yazının referansları:

https://blog.logrocket.com/understanding-min-content-max-content-fit-content-css/

https://courses.joshwcomeau.com/css-for-js/01-rendering-logic-1/10-widths

Umarım faydalı bir yazı olmuştur. Eksik veya yanlış olduğunu düşündüğünüz kısımları bana iletirseniz çok sevinirim :)

İletişim kanalları: TwitterLinkedInMail

Bir sonraki yazıda görüşmek üzere!

--

--