Angular组件和CSS：子组件对于其父组件太大

Question

我正在使用Jhipster在Angular 4.3中生成的应用程序。

我在父组件中包含几个组件，并且在显示时遇到了问题。 实际上看起来像这样：

父组件中的代码如下所示：

<h1> My title </h1>
<div class="row">
    <div class="col-md-8">
        <jhi-child-comp1></jhi-child-comp1>
    </div>
    <div class="col-md-4">
        <jhi-child-comp2></jhi-child-comp2>
        <jhi-child-comp3></jhi-child-comp3>
    </div>
</div>

child-comp1包含一个对于我的屏幕而言太大的表，该表的类为：

<div class="table-responsive" *ngIf="users">
        <table class="table table-hover">
            ...
        </table>
</div>

如果孩子太大，我不知道如何在父组件上添加滚动条。

我已经搜索了解决方案，但是我只找到了这样的解决方案：限制父组件的子组件大小

但是，如果子组件可能占用太多空间，我想在父组件上使用滚动条。

有人有主意吗？

Answer 1

    <!DOCTYPE html>
    <html>
    <head>
    <style> 

   div.ex1 {
    background-color: lightblue;
    height: 30px;
    overflow-y: scroll;
}
   </style>
    </head>
    <body>
    <h1>The overflow-x Property</h1>
    <h2>overflow-x: scroll:</h2>
    <div class="ex1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
    The overflow-x property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the left and right edges
    </div>
    </body>
    </html>

Angular组件和CSS：子组件对于其父组件太大

问题描述

1 个解决方案

解决方案1
4 已采纳 2018-02-20 09:25:38

Angular组件和CSS：子组件对于其父组件太大

问题描述

1 个解决方案

解决方案1 4 已采纳 2018-02-20 09:25:38

解决方案1
4 已采纳 2018-02-20 09:25:38