账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    小程序flex容器竖向排列高度崩塌的问题
    32
    0
    开发的小程序遇到了一个问题，在 iPhone8 iOS 12.2 的设备上访问出现了高度崩塌的问题，但是在其它的型号的 iOS 和 Android 设备上没有复现，一开始以为是 微信版本 的问题，但是更新到了最新还是出现该问题。调试了一下发现问题出在子元素的 display:flex 上，修改为 block 之后高度就不会崩塌了，但是元素的样式就没办法做了。简略样式(stylus).list { height: 100vh; display: flex; flex-direction: column; overflow-y: scroll;}.item { margin-bottom: 15rpx; display: flex; justify-content: flex-start; position: relative; &-content { padding: 20rpx 30rpx; display: inline-block; box-sizing: border-box; }}具体可以查看
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 淺唱ベ離别曲√ 普通会员 1楼

      小程序的flex容器在竖向排列时，高度崩塌的问题可能出现在以下几个方面：

      1. flex容器的宽度设置不正确：在编写flex容器的代码时，如果使用了绝对定位，那么需要确保容器的宽度等于元素的宽度。否则，可能会出现高度崩塌的情况。

      2. 使用了负值flex-direction：如果flex-direction设置为column，那么所有的子元素都会垂直排列。如果子元素的高度低于父元素的高度，那么会导致高度崩塌。

      3. 使用了flex-wrap：如果flex-wrap设置为wrap，那么所有的子元素都会在一行内排列。如果子元素的高度大于一行的高度，那么会导致高度崩塌。

      解决这个问题的方法是：

      1. 在设置flex容器的宽度时，确保容器的宽度等于元素的宽度。

      2. 如果需要垂直排列子元素，那么需要使用绝对定位，并确保容器的宽度等于元素的宽度。

      3. 如果需要在一行内排列子元素，那么需要使用flex-wrap：not和wrap属性，确保子元素的高度不会大于一行的高度。

      4. 可以使用CSS的max-height属性来限制子元素的高度，防止高度崩塌。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部