采用弹性盒子布局时候 内部有内容溢出时候应该注意的情况

问题描述：一共有两栏布局，一侧固定宽度，另外一侧自适应宽度；在采用弹性盒子布局时候，假如内部有一块区域有内容溢出的情况时候，如何仅仅使内部内容区域出现滚动条，而不是整个侧边整体出现滚动条？

代码还原问题：

结构样式

 



        
左侧固定220px
        
        

            

            

                
主题内容
            
        
    

浏览器渲染呈现出：

在屏幕适配的情况下，在屏幕不断变小时候 content区域 这个弹性子项的内容里有一部分内容  在自适应宽度的过程中  宽度超出了父盒子的适应宽度，在这种情况在  直接使内容溢出出现滚动条 是不可以实现的 因为弹性父盒子会  在内容宽度大于 自己自适应的宽度值时候  自己取到内容的宽度 即子项的宽度  从而整个内容发生溢出  出现外侧滚动条

解决办法：可以给左侧父盒子设置一个初始的固定宽度（此宽度远远小于屏幕的宽度），然后利用弹性盒子flex:1；自适应的占据屏幕剩余宽度，不会再挤压左侧盒子，也不会让内部溢出内容撑大自己的宽度 让自己出现滚动条，而是使内部溢出的内容自己出现滚动条。

 .right {
            flex: 1;
            /* 
                添加的内容
             */
            width: 300px;
            height: 100%;
            background-color: skyblue;

        }

主要是弹性盒具有 由内容撑开的特性，其实此处采用网格布局也会出现这种现象。所以平时需要细心。

当然解决的方案还有其他方式，比如你用媒体查询做屏幕适配的时候，将左侧盒子转化为块元素，不再具有弹性盒子的性质，既不会再出现此情况。...  

记录分享。~~~