关于使用flex布局的下父元素自适应宽度，子元素长度超出父元素宽度的一个解决方法

最新推荐文章于 2025-06-06 17:44:34 发布

原创最新推荐文章于 2025-06-06 17:44:34 发布 · 1.3w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #flex #absolue

CSS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在Flex布局中，当子元素内容过长导致父元素宽度被撑开的问题解决方案。通过设置父元素为相对定位，并将子元素设置为绝对定位，配合left和right属性，实现子元素宽度自适应且不会撑开父元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码：

<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;
}