Chiều rộng CSS flexbox 100% Firefox

Question

Tôi gặp sự cố với kịch bản này trong Firefox. #pager có chiều rộng của con của nó. Tuy nhiên, trong Chrome, nó có chiều rộng của cha mẹ của nó. Làm thế nào tôi có thể làm cho # item-list tôn trọng chiều rộng của cha mẹ trong Firefox?

hãy xem! 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 có vấn đề với chiều rộng của đối tượng #item-list. Tôi không thể nghĩ ra bất cứ điều gì khác thì đây là một lỗi, ít nhất là chrome là ít picky trên chiều rộng. Vì vậy, những gì bạn sẽ phải làm là cung cấp cho nó một chiều rộng cố định như đã nói bởi redbmk. Vì vậy, đây là giải pháp:

đặt vị trí #item-list thành absolute và cung cấp cho nó width của 100% (trong ví dụ trừ đường viền của 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; 
} 

Tôi cũng đã thay đổi một số điều nhỏ (không thực sự quan trọng) trong mã của bạn.

nhìn thấy nó ở đây:

Jsfiddle

Cheers!

Answer 2

đây là một liên kết làm việc https://jsfiddle.net/ymvmf6zz/1/

dường như thiết lập một cách rõ ràng chiều rộng trên #sidebar và #main đã làm cho nó công việc.

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