[英]Angular flex-layout wrong overflow
I want to use Angular's flexLayout. 我想使用Angular的flexLayout。 Problem is, when I try to overflow flexible content, it wont be.
问题是,当我尝试溢出灵活的内容时,它不会。 When content is larger than its container, it simply "overgrow" it's container.
当内容大于其容器时,它只是“过度增长”了它的容器。
I have found solition, but Intrinsic & Extrinsic Sizing suport is poor at this moment. 我已经找到了孤独感,但是目前本机和外部大小调整的支持都很差。
Here is an plunker example . 这是一个例子 。 I have tried
min-height
prop: 我尝试了
min-height
道具:
.detail-row-item{
// min-height: min-content; //good solution, but poor browser suport
}
It worked on chrome. 它适用于chrome。 Is there any different solution to do
min-height: min-content;
是否有其他解决方案来执行
min-height: min-content;
result ? 结果呢?
Edit: I found out that this example, works fine on Firefox and Edge only chrome has problem as shown on screenshot. 编辑:我发现此示例在Firefox和Edge上运行良好,只有chrome出现问题,如屏幕截图所示。
If you restrict the height of the div
elements and their content overflows their size, you can use the CSS overflow property to adjust the behavior. 如果限制
div
元素的高度,并且它们的内容溢出其大小,则可以使用CSS 溢出属性来调整行为。 So if you add overflow: auto;
因此,如果您添加
overflow: auto;
or overflow: hidden;
或
overflow: hidden;
to your .card-wrapper
class definition, the cards will get scrollbars or just hide the overflowing texts. 在您的
.card-wrapper
类定义中,卡片将获得滚动条或仅隐藏溢出的文本。
Edit: 编辑:
To achieve the same result as with min-height: min-content
, just remove the flex attribute of the div.detail-content-wrapper
element and set the following ones: 要获得与
min-height: min-content
相同的结果min-height: min-content
,只需删除div.detail-content-wrapper
元素的flex属性并设置以下内容:
.detail-content-wrapper {
max-height: 50%;
overflow: auto;
}
You can check the modified plunker . 您可以检查修改后的插头 。
Add like this below in your CSS file. 在CSS文件中添加以下内容。
.card-wrapper.detail-card {
overflow: auto;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.