flex布局下，max-width的 flex-basis 的问题

这两天在做页面调整，以前在未使用 flex 布局时，很多元素我给设置了 max-width，可以多浏览器兼容

在这次使用了flex布局后，部分元素设置了max-width，结果急速模式没有问题，兼容模式(ie)下，设置了max-width的元素跑掉了，只有当 flex-basis和max-width一致的时候才显示正常

这个是正常显示的样子


  <div style="display:flex;width:400px;padding:10px;border:1px solid #ccc;justify-content:space-between;">
    <div style="width:100px;padding:10px;border:1px solid #ccc;">左边</div>
    <div style="padding:10px;border:1px solid #ccc;">右边</div>
  </div>

这个就显示不正常了


        <div style="display:flex;width:400px;padding:10px;border:1px solid #ccc;justify-content:space-between;">
            <div style="width:100px;padding:10px;border:1px solid #ccc;">左边</div>
            <div style="padding:10px;border:1px solid #ccc;flex:1;max-width:50%;display:flex;">右边</div>
        </div>

而如果加上 flex-basis，则max-width失效了，他自动弹性到50%了，失去了max-width设置的意义，


        <div style="display:flex;width:400px;padding:10px;border:1px solid #ccc;justify-content:space-between;">
            <div style="width:100px;padding:10px;border:1px solid #ccc;">左边</div>
            <div style="padding:10px;border:1px solid #ccc;flex:1;max-width:50%;display:flex;flex-basis:50%;">右边</div>
        </div>

img

上边三个布局如图

我的问题是，如何在 flex 布局下，对 max-width 进行友好的支持，而不是直接使用 flex-basis 强制布局

即：设置了max-width的元素，在元素未占满max-width设置时，他不会放大到max-width的宽度


        <div style="display:flex;width:400px;padding:10px;border:1px solid #ccc;justify-content:space-between;">
            <div style="width:350px;padding:10px;border:1px solid #ccc;">左边</div>
            <div style="padding:10px;border:1px solid #ccc;flex:1;max-width:50%;display:flex;flex-basis:50%;">右边</div>
        </div>

补充一个，当左边宽度比较长，需要占用右边空间时，由于flex-basis的存在，他无法扩张了

img


        <div style="display:flex;width:400px;padding:10px;border:1px solid #ccc;justify-content:space-between;">
            <div style="width:350px;padding:10px;border:1px solid #ccc;">左边</div>
            <div style="padding:10px;border:1px solid #ccc;flex:1;max-width:50%;display:flex;">右边</div>
        </div>

左边元素空间占用较多，右边空间不够max-width时，应该收缩右边，和这个一样

img