资讯专栏INFORMATION COLUMN

'align-items: center/flex-end ' breaks

邹强 / 2842人阅读

摘要:实例结果左侧区域的不见了。而且滚动也不会出现。这是因为只会对下方或右侧超出的部分滚动,对左侧和上方无效左侧可以尝试设置超出。也是横向无滚动解决方案中间再包一层实例结果

实例
content
content
.slidesWrap {
  display: flex;
  align-items: center;
  overflow: auto;
}

.slide {
  overflow: auto;
  flex: 1;
  max-height:100%;
}

结果:


左侧区域的content不见了。而且滚动也不会出现。
这是因为overflow:scroll 只会对下方或右侧超出的部分滚动 ,对左侧和上方无效(左侧可以尝试float: right设置超出。也是横向无滚动)

解决方案

1.中间再包一层
2.max-height:100%;

实例:

content
content
.slidesWrap {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.slide {
  overflow: auto;
  flex: 1;
  max-height:100%;
}

结果:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/54904.html

相关文章

  • 'align-items: center/flex-end ' breaks

    摘要:实例结果左侧区域的不见了。而且滚动也不会出现。这是因为只会对下方或右侧超出的部分滚动,对左侧和上方无效左侧可以尝试设置超出。也是横向无滚动解决方案中间再包一层实例结果 实例 content content .slidesWrap { display: flex; align-items: cente...

    codergarden 评论0 收藏0
  • '{ }'在不同上下文中的作用

    摘要:大括号的作用,在不同的上下文中差别很大以下观点若有错误,请前辈及时指出一被当做对象字面量如,外层的被赋值给了,这里的被当做对象处理。本文参考你不知道的 大括号‘{ }’的作用,在不同的上下文中差别很大!以下观点若有错误,请前辈及时指出! 一、{ }被当做对象字面量 如:var obj = { foo: function(){} };,外层的{...}被赋值给了obj,这里的{...}被...

    Reducto 评论0 收藏0
  • 避免取值时出现Cannot read property 'xx' of unde

    摘要:由于是以空函数为代理对象,我们可以将执行它,触发。中会遍历数组依次取值,如果发现无法继续取值则,跳出循环。 本文来自我的博客,欢迎大家去GitHub上star我的博客 我们在取值特别是链式取值的时候,常常会遇到Cannot read property xx of undefined的错误,如何避免这种情况的发生呢?这里有几种方法以供参考 使用成熟的库方法 这是最简单的一种手段:只用引入...

    fantix 评论0 收藏0
  • q'qJavaScript学习第三天笔记(语句)

    摘要:循环语句循环语句是什么循环语句是一系列反复执行到符合特定条件的语句。示例代码如下跳转语句什么是跳转语句跳转语句就是使得代码的执行可以从一个位置到另一个位置,跳转语句包括和两种。 语句 语句 语句的概述 1.描述:在JavaScript中,语句使用分号(;)进行分隔。可以在每行编写一条语句,也可以在每行编写多 条语句(建议每行只编写一条语句)。JavaScript解释器按照语句...

    chenjiang3 评论0 收藏0
  • 欧拉函数(Euler' totient function )

    摘要:传送门这个就是主角欧拉函数。在数论中,对正整数,欧拉函数是小于或等于的正整数中与互质的数的数目。欧拉函数实际上是模的同余类所构成的乘法群即环的所有单位元组成的乘法群的阶。 欧拉函数(Euler totient function ) Author: Jasper Yang School: Bupt 前言 gamma函数的求导会出现所谓的欧拉函数(phi),在一篇论文中我需要对好几个欧...

    lewinlee 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<