直接上代码：
<div class="parent"> <p class="childOne">关于使用flex布局的下父元素自适应宽度，子元素长度超出父元素宽度的一个解决方法</p> <button class="childTwo" type="button"></button> </div> .parent { flex: 1; display: flex; overflow: hidden; } .childOne { flex: 1; margin-right: auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .childTwo { width: 20px; margin-right: 5px; }上述的代码在实践中会出现一个问题：假如p元素的内容过长，就会将父元素撑开，overflow不起作用了。这个问题是因为弹性布局的特性以及父元素没有一个固定的长度进行限制这两个因素构成的。 所以要是对父元素的长度不需要自适应的，可以设置固定的长度值。 但是有时候设计上不适宜使用固定长度值，那我们可以转变一下思路。在设置绝对定位的时候，同时设置left与right值，可以使元素会得到一个以离它最近的一个设置了相对定位的父级元素的长度减去left值和right值的长度。 于是我们将parent设置成相对定位，然后将childOne设置成绝对定位，同时childOne设置相应的left值与right值，那childOne就能获取到一个宽度了，同时也能使childOne的宽度随父元素的变化而变化。
修改后的代码下：
.parent { flex: 1; display: flex; overflow: hidden; position: relative; } .childOne { position: absolute; top: 0; left: 5px; right: 25px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .childTwo { width: 20px; margin-right: 5px; margin-left: auto; }