tags: ‘flex’

categories: ‘flex’

解决flex布局中子元素超出父元素宽度的问题

左边是left， 右边是right。 设置父级为display:flex; right为flex:1;然后left 为 white-space: nowrap; 这时right就有可能超出父级。解决方法是把right设置为width:0；就可以了；

  1. <style>
  2. .flex {
  3.     display: flex;
  4. }
  5. .left {
  6.     flex: none;
  7.     width: 300px;
  8. }
  11. .right {
  12.     flex: 1;
  13.     width: 0;
  14. }
  16. /*解决方案*/
  17. /*超出的子元素是son2，就在son2中加入width: 0;  
  18. 为了兼容火狐浏览器，需要加overflow:hidden
  19. */
  20. .right {
  21.     width: 0;
  22.     overflow: hidden;
  23. }
  24. </style>
  26. <div class="flex">
  27.     <div class="left">任意内容任意内容</div>
  28.     <div class="right">任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容任意内容</div>
  29. </div>

解决方案
在超出的元素上加入下面的样式

  1. width: 0;
  2. overflow: hidden; // 为了兼容火狐浏览器，需要加下面的代码