2 zilan830 zilan830 于 2016.03.10 16:25 提问

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

1个回答

zilan830
zilan830   2016.03.10 16:34
已采纳

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

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!