Larghezza flexbox CSS 100% Firefox

Question

Ho riscontrato un problema con questo scenario in Firefox. #pager prende la larghezza dei suoi figli. Tuttavia, in Chrome, prende la larghezza del suo genitore. Come posso fare in modo che # elenco-articoli rispetti la larghezza del suo genitore in Firefox?

dai un'occhiata! 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 ha problemi con la larghezza dell'oggetto #item-list. Non riesco a pensare a nient'altro che questo è un bug, almeno Chrome è meno schizzinoso sulla larghezza. Quindi, quello che devi fare è dargli una larghezza fissa come detto da redbmk. Quindi, ecco la soluzione:

impostare la posizione #item-list per absolute e dargli un width di 100% (nell'esempio meno il confine del 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; 
} 

Ho anche modificato alcune piccole cose (non molto importanti) nel codice.

vedono qui:

Jsfiddle

Cheers!

Answer 2

ecco un collegamento di funzionamento https://jsfiddle.net/ymvmf6zz/1/

apparentemente impostare esplicitamente la larghezza su #sidebar e #main reso lavoro.

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