问题描述

移动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;