一，min-width和flex结合使用问题

昨天遇到一个问题，就是父元素使用了flex布局，针对一个自适应的子元素，如果这个子元素内部还有块级内容，那么你针对这个子元素设置overflow属性是不生效的，会出现子元素内容溢出的情况，如下：

<div className="App">
      <div className="left">
        <p className="ptext">
          阿三开对方那可是当你发可能对方空间安德森疯狂静安寺的封口机阿森纳地方看见阿森纳地方看见啊苏丹诺夫看见阿森纳地方。
        </p>
      </div>
      <div className="right">啊的书法考级阿斯顿发卡</div>
    </div>

css：
.App {
  display: flex;
}

.left {
  flex: 1 0 100px;
}

.right {
  flex: 0 0 30%;
}

.ptext {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

显示如下

image-20220211140402793的副本.png

可以看到p.ptext下写的text-overfow并没有生效，而是任由字体将父级元素的宽度撑开，这是因为此时div.left下样式min-width默认为auto导致浏览器按照p元素的宽度来设置div.left的宽度了。这是非常不合理的，所以我们需要在div.left下设置min-width：0来覆盖默认min-width，如下：

image-20220211140817469的副本.png

可以看到生效了，预期结果，所以使用flex需要和min-width结合使用才能使得自适应的子元素内容不溢出。。

css问题汇总

一，min-width和flex结合使用问题