移动web中用flex的问题

我在父元素设置了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;
                    }
                }
            }
        }
    }
}

...已解决，在.right-content上加overflow: hidden;