css - CSS:flexbox水平溢出

Closed. This question is off-topic。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。
                        
                        2年前关闭。
                                                                                            
                
        
如何让flexbox容器的子项不拉伸但水平溢出？这样您就可以使用overflow-x滚动或剪切右侧的内容。



我的实验以水平拉伸的项目结束，尽管它们的宽度是固定的。

最佳答案

如果flex-container具有flex-wrap:no-wrap（默认值），则将其设置为overflow:auto;并将flex-items设置为flex: 0 0 100%（或任何所需的宽度而不是100％）就足够了。

section{
  display:flex;
  width:100%;
  overflow:auto;
}

div{
  background-color:chartreuse;
  height:2rem;
  flex: 0 0 100%;
  box-sizing:border-box;
  border:5px solid red;
}

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>