Esnek öğeler neden içerik boyutunu geçmiyor?

4 flexbox sütun var ve her şey iyi çalışıyor, ama bir sütuna bazı metin eklemek ve büyük bir yazı tipi boyutuna ayarlamak, bu flex özelliği nedeniyle olması gerekenden daha geniş sütun yapıyor.

Kullanmaya çalıştım word-break: break-wordve yardımcı oldu, ancak yine de sütunu çok küçük bir genişliğe yeniden boyutlandırdığımda, metindeki harfler birden çok satıra bölünüyor (satır başına bir harf) ve yine de sütun bir harf boyutundan daha küçük genişlik elde etmiyor .

Bu videoyu izleyin (başlangıçta, ilk sütun en küçük, ancak pencereyi yeniden boyutlandırdığımda, en geniş sütun. Her zaman esnek ayarlara saygı duymak istiyorum; esnek boyutlar 1: 3: 4: 4)

Biliyorum, yazı tipi boyutu ve sütun dolgusunun daha küçük olarak ayarlanması yardımcı olacaktır ... ama başka bir çözüm var mı?

Kullanamıyorum overflow-x: hidden.

JSFiddle

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

Esnek Öğelerin Otomatik Minimum Boyutu

Bir flexbox varsayılan ayarıyla karşılaşıyorsunuz.

Esnek bir öğe, ana eksen boyunca içeriğinin boyutundan daha küçük olamaz.

Varsayılanlar ...

• min-width: auto
• min-height: auto

... sırasıyla satır yönünde ve sütun yönünde esnek öğeler için.

Esnek öğeleri şu şekilde ayarlayarak bu varsayılanları geçersiz kılabilirsiniz:

• min-width: 0
• min-height: 0
• overflow: hidden(veya hariç başka bir değer visible)

Flexbox Özellikleri

4.5. Esnek Minimum Öğelerin Otomatik Boyutu

Esnek öğeler için daha makul bir varsayılan minimum boyut sağlamak için, bu belirtim CSS 2.1'de tanımlanan ve özelliklerinin autobaşlangıç ​​değeri olarak yeni bir değer getirir .min-widthmin-height

autoDeğer açısından ...

Kimin esnek bir öğe üzerinde overflowolan visibleesnek öğenin ana eksen dk boyutlu mülkiyet belirtilen zaman ana ekseninde, bir belirten otomatik asgari büyüklüğü . Aksi halde hesaplar 0.

Diğer bir deyişle:

• min-width: autoVe min-height: autone zaman varsayılan geçerlidir overflowolduğunu visible.
• Eğer overflowbir değer değildir visible, en az boyutlu özelliğinin değeri 0.
• Dolayısıyla, ve overflow: hiddenyerine kullanılabilir .min-width: 0min-height: 0

ve...

• Minimum boyutlandırma algoritması yalnızca ana eksene uygulanır.
• Örneğin, satır yönündeki bir kaptaki bir esnek öğe min-height: autovarsayılan olarak alınmaz .
• Daha ayrıntılı bir açıklama için bu gönderiye bakın:
  • min. genişlik, esneme yönünde farklı: sıra ve esneme yönü: sütun

Minimum genişlik: 0 uyguladınız ve öğe hala küçülmüyor mu?

İç içe Flex Konteynerler

HTML yapısının birden çok düzeyindeki esnek öğelerle uğraşıyorsanız , daha yüksek düzeylerdeki varsayılan min-width: auto/ min-height: autoon öğelerini geçersiz kılmak gerekebilir .

Temel olarak, ile daha üst düzey bir esnek öğe, min-width: autoaşağıda yuvalanmış öğelerin daralmasını önleyebilir min-width: 0.

Örnekler:

• Flex öğesi, içeriğinden daha küçük küçülmüyor
• Çocuk ebeveyn içine sığdırma
• white-space css özelliği flex ile ilgili sorunlar yaratıyor

Tarayıcı Oluşturma Notları

• Chrome ile Firefox / Edge karşılaştırması

  En az 2017'den beri, Chrome'un (1) min-width: 0/ min-height: 0varsayılanlara geri döndüğü veya (2) 0belirli durumlarda gizem algoritmasına dayanan varsayılanları otomatik olarak uyguladığı görülüyor . (Bu, müdahale olarak adlandırdıkları şey olabilir .) Sonuç olarak, birçok kişi düzenlerinin (özellikle istenen kaydırma çubuklarının) Chrome'da beklendiği gibi çalıştığını, ancak Firefox / Edge'de olmadığını görüyor. Bu sorun burada daha ayrıntılı olarak ele alınmaktadır : Firefox ve Chrome arasındaki esnek küçültme tutarsızlığı

• IE11

  Spesifikasyonda belirtildiği gibi auto, min-widthve min-heightözelliklerinin değeri "yeni" dir. Bazı tarayıcılar hala etkisiz hale getirdiğini Bu araçlar 0değeri güncellendi önce onlar esnek düzeni uygulanıp çünkü, çünkü varsayılan olarak değer 0için başlangıç değeri min-widthve min-heightde CSS 2.1 . Böyle bir tarayıcı IE11'dir. Diğer tarayıcılar auto, flexbox spesifikasyonunda tanımlandığı gibi daha yeni bir değere güncellendi .

Gözden Geçirilmiş Demo

.container {
  display: flex;
}

.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}

.col1 {
  flex: 1;
  background: orange;
  font-size: 80px;
  min-width: 0;   /* NEW */
}

.col2 {
  flex: 3;
  background: yellow
}

.col3 {
  flex: 4;
  background: skyblue
}

.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

jsFiddle