Flexbox çocuklarını ebeveynlerinin% 100 yüksekliğinde nasıl yapabilirim?

Bir Flexbox içindeki bir flex öğesinin dikey alanını doldurmaya çalışıyorum.

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

Ve işte JSFiddle

flex-2-child aşağıdaki durumlar haricinde gerekli yüksekliği doldurmaz:

1. flex-2 % 100 yüksekliğe sahiptir (esnek bir öğenin varsayılan olarak% 100'ü olduğu için gariptir + Chrome'da buggy'dir)
2. flex-2-child mutlak bir pozisyona sahiptir ve bu da elverişsizdir

Bu şu anda Chrome veya Firefox'ta çalışmıyor.

kullanım align-items: stretch

David Storey'in cevabına benzer şekilde, geçici çözümüm:

.flex-2 {
    display: flex;
    align-items: stretch;
}

Alternatif olarak align-items, align-selfsadece .flex-2-childuzatılmasını istediğiniz öğeyi kullanabilirsiniz.

Benzer bir soruyu burada cevapladım .

Zaten söylediğinizi position: absolute;elverişsiz olduğunu biliyorum ama işe yarıyor. Yeniden boyutlandırma sorununu çözme hakkında daha fazla bilgi için aşağıya bakın.

Ayrıca , yalnızca Chrome'da bu kadar açık webkit önekleri ekledim, ancak bir demo için bu jsFiddle bakın .

Temel olarak ayrı ayrı ele alacağım 2 sorun var.

1. Bir esnek öğenin çocuğunu yüksekliği% 100 doldurması
   • position: relative;Çocuğun ebeveynine ayarlayın .
   • position: absolute;Çocuk ayarlayın .
   • Ardından genişliği / yüksekliği gerektiği gibi ayarlayabilirsiniz (örneğimde% 100).
2. Chrome'da yeniden boyutlandırma kaydırma "tuhaflığını" düzeltme
   • Put overflow-y: auto;kaydırılabilir div üzerinde.
   • Kaydırılabilir div, açık bir yüksekliğe sahip olmalıdır. Örneğim zaten% 100 yüksekliğe sahip ancak önceden uygulanmamışsa,height: 0;

Kaydırma sorunu hakkında daha fazla bilgi için bu cevaba bakınız .

Doğru anlarsam, flex-2-child öğesinin ebeveyninin yüksekliğini ve genişliğini doldurmasını istersiniz, böylece kırmızı alan tamamen yeşil ile kaplanır mı?

Öyleyse, flexbox'ı kullanmak için flex-2'yi ayarlamanız yeterlidir:

.flex-2 {
    display: flex;  
}

Sonra flex-2-child'a esnek olmasını söyleyin:

.flex-2-child {    
    flex: 1;
}

Bkz. Http://jsfiddle.net/2ZDuE/10/

Bunun nedeni, flex-2-child'ın bir flexbox öğesi değil, üst öğesidir.

Chrome'un davranışının CSS spesifikasyonu ile daha tutarlı olduğunu düşünüyorum (daha az sezgisel olsa da). Flexbox özelliğine göre stretch, align-selfözelliğin varsayılan değeri yalnızca öğenin "çapraz boyut özelliğinin" ( heightbu durumda) kullanılan değerini değiştirir . Ve CSS2.1 spesifikasyonunu anladığım gibi , yüzde yükseklikleri , kullanılan değerinden değil , ebeveynin belirtilen değerinden hesaplanır height. Ebeveynin belirtilen değeri heightherhangi bir esnek özellikten etkilenmez ve yine de etkilenir auto.

Açık Ayar height: 100%markaları onu resmen mümkün sadece belirleme gibi çocuğun yüzde yüksekliğini hesaplamak height: 100%için htmlmümkün yüzdesi yüksekliğini hesaplamak için yapar bodyCSS2.1 içinde.

Çözümü kendim buldum, varsayalım aşağıda CSS:

.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  height: 100%; <- didn't work
}

Bu durumda, yüksekliği% 100 ayarlamak işe yaramaz, bu yüzden yaptığım margin-bottomkuralı aşağıdaki autogibi ayarlamak:

.child {
  margin-bottom: auto;
}

ve çocuk ebeveynin en üst kısmına hizalanacak, isterseniz align-selfkuralı yine de kullanabilirsiniz .

.child {
  align-self: flex-start;
}

Bir fikir olurdu display:flex;ile flex-direction: row;dolduruyor containerile div .flex-1ve .flex-2, ama bu demek değildir .flex-2bir ayarı vardır height:100%;tam yüksekliğe uzatılır ve bir alt öğesi (olması bile .flex-2-childbirlikte) height:100%;size ebeveyni ayarlamak gerekir height:100%;veya kullanım display:flex;ile flex-direction: row;ilgili .flex-2div de.

Bildiğim kadarıyla display:flextüm çocuk elemanlarınızın yüksekliğini% 100'e yükseltmeyecek.

Küçük bir demo, yüksekliği kaldırdı .flex-2-childve display:flex;üzerinde kullanıldı .flex-2: http://jsfiddle.net/2ZDuE/3/

html

<div class="container">
    <div class="flex-1"></div>
    <div class="flex-2">
        <div class="flex-2-child"></div>
    </div>
</div>

css

.container {
    height: 200px;
    width: 500px;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.flex-1 {
   flex:1 0 100px;
    background-color: blue;
}
.flex-2 {
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1 0 100%;
    background-color: red;
}
.flex-2-child {
    flex: 1 0 100%;
    height:100%;
    background-color: green;
}

http://jsfiddle.net/2ZDuE/750/

Bu, align-self: stretch;gerilmek istediğimiz eleman üzerinde de çözülebilir .

Bazen bir flexbox kurulumunda sadece bir öğeyi uzatmak istenebilir.

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  align-self: stretch;
  background-color: red;
}
.flex-2-child {
  background-color: green;
}

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

} taşıyıcı. . . . hizalama öğeleri: streç; . . . . }

Bu benim css + kullanarak benim çözüm

Her şeyden önce eğer ilk çocuk (flex-1) 100 piksel ise esnek olmamalıdır. Aslında css + ' da esnek ve / veya statik öğeler (sütunlar veya satırlar) ayarlayabilirsiniz ve örneğiniz bu kadar kolay olur:

<div class="container">
  <div class="EXTENDER">
    <div class="COLS">
      <div class="CELL _100px" style="background-color:blue">100px</div>
      <div class="CELL _FLEX" style="background-color:red">flex</div>
    </div>
  </div>
</div>

konteyner css:

.container {
    height: 200px;
    width: 500px;
    position:relative;
}

ve tabii ki css + 0.2 çekirdek

kemanı duy