flex布局项目元素超出容器元素

  .box {
      width: 800px;
      height: 400px;
      display: flex;
      border: 1px solid red;
  }
  .children{
        flex-grow: 1;
        background-color: rgb(119, 80, 80);
        position: relative;
        opacity: .3;
  }
  .left{
      width: 200px;
      flex-shrink: 0;
      background: pink;
  }

    <div class="box">
        <div class="left">
            left
        </div>
        <div class="children">
            children
        </div>
    </div>

首先是一个很简单的flex布局

这里children 占据了容器元素剩余的位置，并且没有超出父元素

改造一下：

    <div class="box">
        <div class="left">
            left
        </div>
        <div class="children">
            children
+           <div style="width:10000px;height:20px;background-color: pink;">
+           </div>
        </div>
    </div>

这里可以看到 children元素 超出了 容器元素，很奇怪，解决方式：

    .children{
        flex-grow: 1;
        background-color: rgb(119, 80, 80);
        position: relative;
        opacity: .3;
+       min-width: 1px;
    }

children 元素遵循了包裹性的原则 没有超出容器元素大的小，这里的解决方案就是给项目元素加一个 min-width:1px;

问题来源于: antd 低版本 走马灯 容器元素的父元素使用flex布局 容器元素超出父元素大小，走马灯无法自适应，且超出大小