我在父元素设置了display:flex;子元素两个div,一个div限定了宽度为80px;另一个设置为flex:1。可是设置flex的宽度还是溢出了。请问这是什么原因?
html:
<div class="list-contents">
<ul class="list-ul">
<li class="list-li">
<a href="">
<div class="inner-container">
<div class="img-container">
<img src="image/face01.jpg" alt="" />
</div>
<div class="right-content">
<p class="title">中国竟有这样美的温泉酒店?全地暖树屋别墅,竹海温泉!</p>
<p class="brief"></p>
</div>
</div>
</a>
</li>
</ul>
</div>
css:
.list-contents {
width: 100%;
margin-top: 10px;
.list-ul {
margin: 0;
padding: 0;
list-style: none;
.list-li {
overflow: hidden;
.inner-container {
height: 85px;
display: flex;
.img-container {
align-self: center;
width: 80px;
height: 60px;
display: table-cell;
vertical-align: middle;
text-align: center;
background-color: #aaa;
>img {
max-width: 80px;
max-height: 60px;
vertical-align: middle;
text-align: center;
}
}
.right-content {
flex: 1;
padding: 10px;
.title {
font-size: 14px;
font-weight: bold;
color: #555;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.brief {
font-size: 14px;
color: #aaa;
}
}
}
}
}
}