ericleo ericleo - 5 months ago 41
CSS Question

CSS flexbox width 100% Firefox

I'm having an issue with this scenario in Firefox. #pager takes the width of its children. However, in Chrome, it takes the width of its parent. How can I make #item-list respect the width of its parent in Firefox?

take a look! 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

firefox has problems with the width of the object #item-list. I can not think of anything else then this is a bug, at least chrome is less picky on the width. So, what you'll have to do is give it a fixed width as said by redbmk. So here is the solution:

set the #item-list position to absolute and give it a width of 100% (in the example minus the border of the divs).

#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;
}

I also changed some small(not really important things) in your code.

see it here:

Jsfiddle

Cheers!