我在一个列表项中有一个容器,它具有灵活的显示。当此容器内的内容也具有灵活的显示时,容器会调整为内容大小,而不是溢出内容。列表元素如下所示。
如果标签太长,列表项将相应地调整大小,而不是让标签溢出。
#div {
width: 300px;
border: 1px solid red;
}
#userimage {
width: 20px;
height: 20px;
border: 1px solid red;
}
#usertag {
display: flex;
}
#inner {}
#outer {
display: flex;
}
ul {
list-style-type: none;
}
p {
margin: 0;
text-overflow: ellipsis;
overflow: hidden;
}
<div id="div">
<ul>
<li>
<div id="outer">
<div id="inner">
<input type="checkbox" id="checkbox" />
</div>
<div id="usertag">
<div id="userimage">
</div>
<p>
<label>1</label>
</p>
</div>
</div>
</li>
<li>
<div id="outer">
<div id="inner">
<input type="checkbox" id="checkbox" />
</div>
<div id="usertag">
<div id="userimage">
</div>
<p>
<label>12312312312451232e524t230t923t8rq0w9t8q0w9er</label>
</p>
</div>
</div>
</li>
</ul>
</div>
这是flex布局的工作原理吗?还是我做错了什么?
min-width: auto
。您需要使用#usertag { min-width: 0}
来覆盖此设置。https://jsfiddle.net/pb1qkaes/ - Michael Benjamin