CSS flexbox宽度100％Firefox [英] CSS flexbox width 100% Firefox

问题描述

我在Firefox中遇到这种情况。 #pager采用其子级的宽度。但是，在Chrome中，它采用其父级的宽度。如何在Firefox中让＃ite​​m-list尊重其父级的宽度？

看看！ 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; 
宽度：100％； 
身高：100％； 
} 
 
 #sidebar {
溢出：自动； 
 flex：0.25; 
 border：3px纯绿色； 
最低高度：200像素； 
} 
 
 #main {
 display：flex; 
 flex：.75; 
 flex-direction：列; 
 border：3px纯橙色； 
} 
 
 #content {
职位：相对； 
宽度：100％； 
 flex：0.85; 
边框：3像素的纯蓝色； 
} 
 
 #pager {
 display：flex; 
职位：相对； 
宽度：100％； 
 background-color：#fff; 
边框：3px纯粉红色； 
 flex：0.15; 
} 
 
＃item-list {
 border：1px solid black; 
宽度：100％； 
overflow-x：滚动； 
溢出-y：隐藏; 
空白：nowrap; 
} 
 
 .item {
 display：inline-block; 
填充：5px； 
宽度：200像素； 
高度：200像素； 
 background-color：红色； 
} 
 
 #stuff {
 height：200px; 
} 
 
 * {
保证金：3px； 
} 
  

解决方案

firefox的宽度有问题＃item-list 的对象。我什么也没想到，那就是一个bug，至少铬在宽度上不那么挑剔。因此，您要做的就是按照redbmk所说的给它一个固定的宽度。所以这是解决方案：

将＃item-list 的位置设置为 absolute 并为其提供 100％的宽度（在示例中减去div的边框）

  #pager {
 display：flex;）。 
职位：相对； 
 background-color：#fff; 
边框：3px纯粉红色； 
高度：246像素； 
} 
 
＃item-list {
 border：1px solid black; 
头寸：绝对； 
宽度：calc（100％-9px）; 
overflow-x：滚动； 
溢出-y：隐藏; 
空白：nowrap; 
} 
  

我还更改了代码中的一些小内容（不是很重要的内容）。 / p>



在这里查看：

Jsfiddle

干杯！

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

解决方案

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!

这篇关于CSS flexbox宽度100％Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！