Angular 组件和 CSS：子组件对于其父组件来说太大了答案

【问题标题】：Angular components and CSS : child component too big for its parentAngular 组件和 CSS：子组件对于其父组件来说太大了
【发布时间】：2018-02-20 17:25:38
【问题描述】：

我正在开发一个由 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>

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

我已经搜索过解决方案，但我只找到了这样的解决方案：Limit the child component size from the parent

但是如果可能的话，如果子组件占用太多空间，我希望在父组件上设置一个滚动条。

有人有想法吗？

【问题讨论】：

我认为你只需要为你的表格添加这个 css ：overflow:scroll;

标签： html css angular jhipster

【解决方案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>

【讨论】：