Szerokość flexu CSS 100% Firefox

Question

Mam problem z tym scenariuszem w Firefoksie. #pager przyjmuje szerokość swoich dzieci. Jednak w Chrome przyjmuje szerokość rodzica. Jak mogę zrobić # item-list z szacunkiem dla szerokości jego rodzica w Firefoksie?

spójrz! https://jsfiddle.net/owmpatbh/2/

HTML:

<div id="wrapper"> 
    <div id="sidebar"></div> 
    <div id="main"> 
     <div id="content"> 
     <p id="stuff">blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah</p>    
     </div> 
     <div id="pager"> 
      <div id="item-list"> 
       <div class="item"></div> 
       <div class="item"></div> 
       <div class="item"></div> 
       <div class="item"></div> 
       <div class="item"></div> 
       <div class="item"></div> 
       <div class="item"></div> 
       <div class="item"></div> 
       <div class="item"></div> 
       <div class="item"></div> 
       <div class="item"></div> 
       <div class="item"></div> 
       <div class="item"></div> 
       <div class="item"></div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS:

#wrapper { 


display: flex; 
    width: 100%; 
    height: 100%; 
} 

#sidebar { 
    overflow: auto; 
    flex: 0.25; 
    border:3px solid green; 
    min-height: 200px; 
} 

#main { 
    display: flex; 
    flex: .75; 
    flex-direction: column; 
    border:3px solid orange; 
} 

#content { 
    position: relative; 
    width: 100%; 
    flex: 0.85; 
    border: 3px solid blue; 
} 

#pager { 
    display: flex; 
    position: relative; 
    width: 100%; 
    background-color: #fff; 
    border: 3px solid pink; 
    flex: 0.15; 
} 

#item-list { 
    border: 1px solid black; 
    width: 100%; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    white-space: nowrap; 
} 

.item { 
    display: inline-block; 
    padding: 5px; 
    width: 200px; 
    height: 200px; 
    background-color: red; 
} 

#stuff { 
    height: 200px; 
} 

*{ 
    margin: 3px; 
} 

Answer 1

firefox ma problemy z szerokością obiektu #item-list. Nie mogę myśleć o niczym innym, to jest błąd, przynajmniej chrom jest mniej wybredny na całej szerokości. Musisz więc nadać mu stałą szerokość, jak powiedział redbmk. Więc tutaj jest rozwiązanie:

ustawić pozycję #item-list do absolute i nadać mu width z 100% (w przykładzie minus granica div).

#pager { 
    display: flex; 
    position: relative; 
    background-color: #fff; 
    border: 3px solid pink; 
    height:246px; 
} 

#item-list { 
    border: 1px solid black; 
    position:absolute; 
    width: calc(100% - 9px); 
    overflow-x: scroll; 
    overflow-y: hidden; 
    white-space: nowrap; 
} 

Zmieniłem także kilka małych (niezbyt ważnych rzeczy) w twoim kodzie.

zobaczyć go tutaj:

Jsfiddle

Cheers!

Answer 2

Oto link pracujących https://jsfiddle.net/ymvmf6zz/1/

najwyraźniej jawnie ustawienie szerokości na #sidebar i #main robione to praca.

#sidebar{ 
    width: 25%; 
} 
#main{ 
    width: 75%; 
}