我如何使这个flexbox容器滚动而不是适应宽度？ [英] How can i make this flexbox container scroll instead of adapting the width?

问题描述

我想让flexbox容器的宽度为100％，并有一个滚动条来查看溢出的内容。现在它似乎将内容适应窗口的宽度，并且它始终占用宽度的100％，而内容不会完全溢出。

https://codepen.io/UrsuGrizzly/pen/BmqPvm
https://jsfiddle.net/duvq2e42/

 < div id =topimg> 
< a href =＃id =st1>< / a> 
< a href =＃id =second>< / a> 
< a href =＃id =first>< / a> 
< a href =＃id =third>< / a> 
< a href =＃id =fourth>< / a> 
< a href =＃id =fifth>< / a> 
< a href =＃id =sixth>< / a> 
< a href =＃id =nd2>< / a> 
< a href =＃id =rd3>< / a> 
< a href =＃id =th4>< / a> 
< / div> 
 
 #topimg {
 display：flex; 
最小宽度：100％; 
 overflow-x：scroll; 
} 
 
 #topimg> * {
 margin：0 4px 0 0; 
 box-shadow：0 1px 6px rgba（32，33，36，0.28）; 
} 
 
 #topimg＃st1 {
 background-color：yellow; 
 width：125px; 
 height：144px; 
 display：block; 
 background-size：cover; 
 background-position：center; 
} 
 
 #topimg＃nd2 {
 background-color：orange; 
 width：100px; 
 height：144px; 
 display：block; 
 background-size：cover; 
 background-position：center; 
} 
 
 #topimg＃rd3 {
 background-color：cyan; 
 width：100px; 
 height：144px; 
 display：block; 
 background-size：cover; 
 background-position：center; 
} 
 
 #topimg＃th4 {
 background-color：green; 
 width：100px; 
 height：144px; 
 display：block; 
 background-size：cover; 
 background-position：center; 
} 
 
 #topimg #first {
 background-color：purple; 
 width：100px; 
 height：144px; 
 display：block; 
 background-size：cover; 
 background-position：center; 
} 
 
 #topimg #second {
 background-color：red; 
 width：250px; 
 height：144px; 
 display：block; 
 background-size：cover; 
 background-position：center; 
} 
 
 #topimg #third {
 background-color：blue; 
 width：200px; 
 height：144px; 
 display：block; 
 background-size：cover; 
 background-position：top; 
} 
 
 #topimg #fourth {
 background-color：fuchsia; 
 width：250px; 
 height：144px; 
 display：block; 
 background-size：cover; 
 background-position：center; 
} 
 
 #topimg #fifth {
 background-color：brown; 
 width：100px; 
 height：144px; 
 display：block; 
 background-size：cover; 
 background-position：center; 
} 
 
 #topimg #sixth {
 background-color：coral; 
 width：100px; 
 height：144px; 
 display：block; 
 background-size：cover; 
 background-position：center; 
 
  

解决方案

c $ c> flex-shrink 默认为 1 ，它可以缩小，除非它的内容阻止它这样做。
$ b 将 flex-shrink：0; 添加到您的 #topimg> * rule

Stack snippet

$ b

  #topimg {display：flex;最小宽度：100％;溢出 -  X：滚动; } #topimg> * {margin：0 4px 0 0; box-shadow：0 1px 6px rgba（32，33，36，0.28）; flex-shrink：0; / * added * /} #topimg＃st1 {background-color：yellow;宽度：125px; height：144px;显示：块; background-size：cover; background-position：center; } #topimg＃nd2 {background-color：orange;宽度：100px; height：144px;显示：块; background-size：cover; background-position：center; } #topimg＃rd3 {background-color：cyan;宽度：100px; height：144px;显示：块; background-size：cover; background-position：center; } #topimg＃th4 {background-color：green;宽度：100px; height：144px;显示：块; background-size：cover; background-position：center; } #topimg #first {background-color：purple;宽度：100px; height：144px;显示：块; background-size：cover; background-position：center; } #topimg #second {background-color：red; width：250px; height：144px;显示：块; background-size：cover; background-position：center; } #topimg #third {background-color：blue;宽度：200px; height：144px;显示：块; background-size：cover; background-position：top; } #topimg #fourth {background-color：fuchsia; width：250px; height：144px;显示：块; background-size：cover; background-position：center; } #topimg #fifth {background-color：brown;宽度：100px; height：144px;显示：块; background-size：cover; background-position：center; } #topimg #sixth {background-color：coral;宽度：100px; height：144px;显示：块; background-size：cover; background-position：center; }  

 < div id =topimg> < a href =＃id =st1>< / a> < a href =＃id =second>< / a> < a href =＃id =first>< / a> < a href =＃id =third>< / a> < a href =＃id =fourth>< / a> < a href =＃id =fifth>< / a> < a href =＃id =sixth>< / a> < a href =＃id =nd2>< / a> < a href =＃id =rd3>< / a> < a href =＃id =th4>< / a>< / div>  

---

作为比较，如果链接是内容，包装完毕，它将按原样运行。

Stack snippet

＃< div id =

I want to make the flexbox container be 100%width and have a scrollbar to see the overflowing content. Now it seems to adapt the content to the width of the window and it always takes 100% of width with the content not overflowing at all.

https://codepen.io/UrsuGrizzly/pen/BmqPvm https://jsfiddle.net/duvq2e42/

<div id="topimg">
 <a href="#" id="st1"></a>
 <a href="#" id="second"></a>
 <a href="#" id="first"></a>
 <a href="#" id="third"></a>
 <a href="#" id="fourth"></a>
 <a href="#" id="fifth"></a>
 <a href="#" id="sixth"></a>
 <a href="#" id="nd2"></a>
 <a href="#" id="rd3"></a>
 <a href="#" id="th4"></a>
</div>

#topimg {
 display: flex;
 min-width:100%;
 overflow-x:scroll;
}

#topimg > * {
 margin: 0 4px 0 0;
 box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
}

#topimg #st1 {
 background-color: yellow;
 width: 125px;
 height: 144px;
 display: block;
 background-size: cover;
 background-position: center;
}

#topimg #nd2 {
 background-color: orange;
 width: 100px;
 height: 144px;
 display: block;
 background-size: cover;
 background-position: center;
}

#topimg #rd3 {
 background-color: cyan;
 width: 100px;
 height: 144px;
 display: block;
 background-size: cover;
 background-position: center;
}

#topimg #th4 {
 background-color:green;
 width: 100px;
 height: 144px;
 display: block;
 background-size: cover;
 background-position: center;
}

#topimg #first {
 background-color: purple;
 width: 100px;
 height: 144px;
 display: block;
 background-size: cover;
 background-position: center;
}

#topimg #second {
 background-color: red;
 width: 250px;
 height: 144px;
 display: block;
 background-size: cover;
 background-position: center;
}

#topimg #third {
 background-color: blue;
 width: 200px;
 height: 144px;
 display: block;
 background-size: cover;
 background-position: top;
}

#topimg #fourth {
 background-color: fuchsia;
 width: 250px;
 height: 144px;
 display: block;
 background-size: cover;
 background-position: center;
}

#topimg #fifth {
 background-color: brown;
 width: 100px;
 height: 144px;
 display: block;
 background-size: cover;
 background-position: center;
}

#topimg #sixth {
 background-color: coral;
 width: 100px;
 height: 144px;
 display: block;
 background-size: cover;
 background-position: center;
}

解决方案

As a flex item's flex-shrink defaults to 1, it is allowed to shrink, and it does, unless its content prevents it to do so.

Add flex-shrink: 0; to your #topimg > * rule

Stack snippet

    #topimg {
     display: flex;
     min-width:100%;
     overflow-x:scroll;
    }

    #topimg > * {
     margin: 0 4px 0 0;
     box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
     flex-shrink: 0;                                    /*  added  */
    }

    #topimg #st1 {
     background-color: yellow;
     width: 125px;
     height: 144px;
     display: block;
     background-size: cover;
     background-position: center;
    }

    #topimg #nd2 {
     background-color: orange;
     width: 100px;
     height: 144px;
     display: block;
     background-size: cover;
     background-position: center;
    }

    #topimg #rd3 {
     background-color: cyan;
     width: 100px;
     height: 144px;
     display: block;
     background-size: cover;
     background-position: center;
    }

    #topimg #th4 {
     background-color:green;
     width: 100px;
     height: 144px;
     display: block;
     background-size: cover;
     background-position: center;
    }

    #topimg #first {
     background-color: purple;
     width: 100px;
     height: 144px;
     display: block;
     background-size: cover;
     background-position: center;
    }

    #topimg #second {
     background-color: red;
     width: 250px;
     height: 144px;
     display: block;
     background-size: cover;
     background-position: center;
    }

    #topimg #third {
     background-color: blue;
     width: 200px;
     height: 144px;
     display: block;
     background-size: cover;
     background-position: top;
    }

    #topimg #fourth {
     background-color: fuchsia;
     width: 250px;
     height: 144px;
     display: block;
     background-size: cover;
     background-position: center;
    }

    #topimg #fifth {
     background-color: brown;
     width: 100px;
     height: 144px;
     display: block;
     background-size: cover;
     background-position: center;
    }

    #topimg #sixth {
     background-color: coral;
     width: 100px;
     height: 144px;
     display: block;
     background-size: cover;
     background-position: center;
    }

<div id="topimg">
          <a href="#" id="st1"></a>
          <a href="#" id="second"></a>
          <a href="#" id="first"></a>
          <a href="#" id="third"></a>
          <a href="#" id="fourth"></a>
          <a href="#" id="fifth"></a>
          <a href="#" id="sixth"></a>
          <a href="#" id="nd2"></a>
          <a href="#" id="rd3"></a>
          <a href="#" id="th4"></a>
</div>

---

As a comparison, if the links were the content, wrapped, it would work as is.

Stack snippet

#topimg {
  display: flex;
  min-width: 100%;
  overflow-x: scroll;
}

#topimg > * {
  margin: 0 4px 0 0;
  box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
}

#topimg #st1 {
  background-color: yellow;
  width: 125px;
  height: 144px;
  display: block;
  background-size: cover;
  background-position: center;
}

#topimg #nd2 {
  background-color: orange;
  width: 100px;
  height: 144px;
  display: block;
  background-size: cover;
  background-position: center;
}

#topimg #rd3 {
  background-color: cyan;
  width: 100px;
  height: 144px;
  display: block;
  background-size: cover;
  background-position: center;
}

#topimg #th4 {
  background-color: green;
  width: 100px;
  height: 144px;
  display: block;
  background-size: cover;
  background-position: center;
}

#topimg #first {
  background-color: purple;
  width: 100px;
  height: 144px;
  display: block;
  background-size: cover;
  background-position: center;
}

#topimg #second {
  background-color: red;
  width: 250px;
  height: 144px;
  display: block;
  background-size: cover;
  background-position: center;
}

#topimg #third {
  background-color: blue;
  width: 200px;
  height: 144px;
  display: block;
  background-size: cover;
  background-position: top;
}

#topimg #fourth {
  background-color: fuchsia;
  width: 250px;
  height: 144px;
  display: block;
  background-size: cover;
  background-position: center;
}

#topimg #fifth {
  background-color: brown;
  width: 100px;
  height: 144px;
  display: block;
  background-size: cover;
  background-position: center;
}

#topimg #sixth {
  background-color: coral;
  width: 100px;
  height: 144px;
  display: block;
  background-size: cover;
  background-position: center;
}

<div id="topimg">
  <span>
    <a href="#" id="st1"></a>
  </span>
  <span>
    <a href="#" id="second"></a>
  </span>
  <span>
    <a href="#" id="first"></a>
  </span>
  <span>
    <a href="#" id="third"></a>
  </span>
  <span>
    <a href="#" id="fourth"></a>
  </span>
  <span>
    <a href="#" id="fifth"></a>
  </span>
  <span>
    <a href="#" id="sixth"></a>
  </span>
  <span>
    <a href="#" id="nd2"></a>
  </span>
  <span>
    <a href="#" id="rd3"></a>
  </span>
  <span>
    <a href="#" id="th4"></a>
  </span>
</div>

这篇关于我如何使这个flexbox容器滚动而不是适应宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！