Bir flexbox içinde esnek bir maddenin yatay boşluğu doldurmaya çalışıyorum.

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 {
    width: 100px;
    background-color: blue;
}
.flex-2 {
    position: relative;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-color: red;
}
.flex-2-child {
    height: 100%;
    width: 100%;
    background-color: green;
}

Ve burada jsfiddle

Flex-2-çocuğun gerekli yüksekliği iki dava nerede: dışında dolmuyor

1. flex-2 0 flex bir ürün 100% varsayılan olarak Chrome adamcağız bir çünkü garip olan) bir yüksekliğe sahiptir
2. flex-2-çocuk da rahatsız edici olan, mutlak bir pozisyonu var

Bu krom Kanarya chrome ve Firefox'un güncel sürümü de çalışmıyor ama firefox gece gayet iyi çalışıyor

Bir şey mi kaçırdım?

6 ** benzer bir soru cevapladım.

Zaten position:absolute; sakıncalıdır ama çalışıyor dediniz biliyorum. Yeniden boyutlandırma sorunu çözme hakkında daha fazla bilgi için aşağıya bakın.

Ayrıca sadece bu kadar açık ve aynı zamanda y önekleri Krom ekledim ancak bir demo için jsFiddle bu.

Temelde ile ayrı ayrı ilgileneceğim 2 sorunları var.

1. Bir alt-madde flex yükseklik 100% doldurmak için
   • Set position:relative; çocuğun ebeveyni üzerinde.
   • Set position:absolute; çocuk.
   • Sonra genişlik/yükseklik gibi gerekli (benim örnek 100%) ayarlayabilirsiniz.
2. Yeniden boyutlandırma kaydırma "cilvesi" Krom . tespit
   • Taşma-y:auto; kaydırılan div giy.
   • Sekmeli div açık bir yükseklik belirtilmiş olması gerekir. Benim örnek zaten yükseklik 100% var ama hiçbiri zaten yükseklik belirtebilirsiniz uygulanırsa:0;

Bu kaydırma bu konuda daha fazla bilgi için answer bkz.