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币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
从移动端webAPP谈起:flex弹性布局
之前的业务以移动端web app为主,页面结构基本上差不多,大概的思路是,横向流动布局,自动铺满宽度,纵向不做限定,由页面元素自上向下堆砌,然后在容器设置滚动就好了。其中,横向布局我花了点时间研究。 例如一个很常见顶栏组件,分左(按钮)中(标题)右(按钮)三个部分: 在不知道flex布局之前,我的方法是:中间铺满父元素,左右按钮做绝对定位,这样能够保持两边按钮组的定位,中间内容铺满,应
flex-iframe移动,以及关闭问题
protected function init():void{             addEventListener("move",ifrDragHandler,false);// 组件移动时事件               addEventListener("close",close, false);           }           private function
推荐一个基于Flex的Web文档打印方案
推荐一个基于Flex的Web文档打印方案 Flex是目前最好的Web文档打印方案,它可以实现安全的精确打印,并且客户端无需安装额外软件(Flash播放器装机率很高…)。 XDocServer就是以Flex为基础实现Web打印的。你只需要把文档的url传递给XDocServer就可以了,文档的格式可以是:xdoc、doc、docx、html、txt、epub、xls等。最好的格式还是xdoc,
css3移动端flex弹性盒子布局
设置弹性盒子:  display: -webkit-box;                 display: -webkit-flex; 设置垂直排列:   -webkit-flex-flow: column;                 -webkit-box-orient: vertical; 设置flex:flex决定了占的宽或高的比例   -webkit-box
在移动Web单页应用中实现固定页脚
一种单页应用的页面结构 面向移动端的单页应用(Single Page Web Application),从页面代码上来说,会使用较一般网页不同的结构。单页应用并不是说应用只需要一个视图,而是说可以将组成应用的多个视图集合在一个网页内呈现,且在视图之间能够自由切换(平滑的动画形式居多)。 我制作单页应用使用的是一种常见方法,像下面这样: .v
[HTML5移动网页开发] Flexbox布局讲解与使用技巧
一 摘要 在前一篇我们讲到了react Native混合APP开发时,布局主要采用是Flexbox布局,不了解可以参考之前的一篇文章. [React Native混合开发]React Native中的Flexbox布局 现在来详细介绍一下Flexbox布局语法跟使用.大家可能非常关心以下几个问题: 1 .什么是Flexbox布局? 2. Flexbox布局主要用于什么场景?
web移动端bug总结-微信,uc,ios,andriod,华为,魅族
根据自己团队项目发现的bug,只是针对移动端页面调试,我们测试的浏览器包括手机版本自带的浏览器,uc,qq,百度,Safari,goole等
Flex布局应用(1)——为什么flex只能做移动端APP开发?
1、APP的分类 (1)原生APP (2)混合APP (3)WEB APP 2、PC端和移动端的差别 (1)用户交互方式不同:表现在鼠标、手指 (2)呈现的数据量不同: PC端——屏幕大、内容多 移动端——内容少 (3)用户体验上不同 移动端——用户会注意“流量”,即要求代码的体积要小,      即在使用框架时,第三方插件时,就与PC端有不同的选择。 Jquery
FLEX皮肤实例4_skinpart
1.概述       上篇文章《FLEX皮肤实例3_自定义类与皮肤交互数据》,相关资料《FLEX皮肤2_皮肤原理》。       皮肤与组件的数据交互是双向中的      1.皮肤调用组件属性:使用:           [HostComponent("spark.components.Button")]           例:{hostComponent.label}
Flex的拖动事件 DragEvent DragManager
import mx.core.IUIComponent; import mx.events.DragEvent; import mx.managers.DragManager; private function dragEnter(event:DragEvent):vo