flex的左右布局,右侧出现x轴滚动条

场景:


        flex的左右布局,左侧菜单宽度固定,右侧自适应。

实现:

       .main{width:100%;display:flex;}

       .left{flex 0 0 180px}

       .right{flex:1;}

遇到的问题:

         在右侧内容中,包含element-ui的table组件,当table内容列很多,宽度超出flex布局得宽度,出现横向滚动条。

解决办法:

.right{flex:1;overflow:hidden}

这样就完美解决出现横向滚动条的问题了。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,809评论 1 92
  • display:设置元素的显示方式 display:block(块级元素) 默认为父元素宽高,可设置宽高相对前序换...
    bluishwhiteC阅读 669评论 0 0
  • CSS布局解决方案(终结版) 前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中,又...
    杀个程序猿祭天阅读 595评论 0 2
  • 居中布局 水平居中 1)使用inline-block+text-align(1)原理、用法 原理:先将子框由块级元...
    littlesiqi阅读 266评论 0 0
  • “九儿已无大碍,上神无需担忧。” 声音从内殿里传来,众人回首,东华已站于屏风旁。 狐帝等人见了,朝他俯身行大礼,“...
    唐晚宁阅读 3,118评论 2 36