zilan830 2016-03-10 08:25 采纳率: 47.6%
浏览 1511
已采纳

移动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 2016-03-10 08:34
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 求chat4.0解答一道线性规划题,用lingo编程运行,第一问要求写出数学模型和lingo语言编程模型,第二问第三问解答就行,我的ddl要到了谁来求了
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥15 maple软件,用solve求反函数出现rootof,怎么办?
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果