From bcbfcc0aeb58f08ebbd4366bc48fa87d9fa64f2e Mon Sep 17 00:00:00 2001
From: Dmitry Nehaychik <4dmitr@gmail.com>
Date: Thu, 26 Oct 2017 16:19:20 +0300
Subject: [PATCH] fix(layout): prevent layout expansion when some child with
 overflow:hidden has an element with width larger than layout width

---
 e2e/layout.e2e-spec.ts                        | 38 +++++++++++++++++++
 src/app/layout-test/layout-test.component.ts  | 10 ++++-
 .../components/layout/layout.component.scss   |  4 +-
 3 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/e2e/layout.e2e-spec.ts b/e2e/layout.e2e-spec.ts
index b34c2579b3..86818c8324 100644
--- a/e2e/layout.e2e-spec.ts
+++ b/e2e/layout.e2e-spec.ts
@@ -117,4 +117,42 @@ describe('nb-layout', () => {
         expect(value).toMatch('content center');
       });
   });
+
+  it('should prevent column expansion if child content is too long in fixed layout', () => {
+
+    const content =  element(by.css('#layout-center > .scrollable-container > .layout > .layout-container > .content'));
+    element
+      .all(
+        by.css(`#layout-center >
+     .scrollable-container > .layout > .layout-container > .content > .columns > nb-layout-column`),
+      )
+      .get(2)
+      .getSize()
+      .then(size => {
+
+        content.getSize().then(contentSize => {
+          // one third of the content widht (as we have 3 columns)
+          expect(size.width).toEqual(Math.ceil(contentSize.width / 3));
+        })
+      });
+  });
+
+  it('should prevent column expansion if child content is too long in fluid layout', () => {
+
+    const content =  element(by.css('#layout-fluid > .scrollable-container > .layout > .layout-container > .content'));
+    element
+      .all(
+        by.css(`#layout-fluid >
+     .scrollable-container > .layout > .layout-container > .content > .columns > nb-layout-column`),
+      )
+      .get(2)
+      .getSize()
+      .then(size => {
+
+        content.getSize().then(contentSize => {
+          // one third of the content widht (as we have 3 columns)
+          expect(size.width).toEqual(Math.ceil(contentSize.width / 3));
+        })
+      });
+  });
 });
diff --git a/src/app/layout-test/layout-test.component.ts b/src/app/layout-test/layout-test.component.ts
index 14576d182b..039a377f10 100644
--- a/src/app/layout-test/layout-test.component.ts
+++ b/src/app/layout-test/layout-test.component.ts
@@ -35,7 +35,10 @@ import { Component } from '@angular/core';
         Center
       </nb-layout-column>
       <nb-layout-column>
-        Right
+        Right<br>
+        <div style="overflow: hidden">
+          <div style="width: 20000px; background: red;">super long </div>
+        </div>
       </nb-layout-column>
 
       <nb-layout-footer>
@@ -55,7 +58,10 @@ import { Component } from '@angular/core';
         Center
       </nb-layout-column>
       <nb-layout-column>
-        Right
+        Right<br>
+        <div style="overflow: hidden">
+          <div style="width: 20000px; background: red;">super long </div>
+        </div>
       </nb-layout-column>
 
       <nb-layout-footer fixed>
diff --git a/src/framework/theme/components/layout/layout.component.scss b/src/framework/theme/components/layout/layout.component.scss
index a41213d4d6..8def295dc2 100644
--- a/src/framework/theme/components/layout/layout.component.scss
+++ b/src/framework/theme/components/layout/layout.component.scss
@@ -55,6 +55,7 @@
       flex: 1;
       -ms-flex: 1 1 auto;
       flex-direction: column;
+      min-width: 0;
 
       &.center {
         max-width: 100%;
@@ -68,11 +69,12 @@
         flex: 1;
         -ms-flex: 1 1 auto;
         flex-direction: row;
+        width: 100%;
 
         /deep/ nb-layout-column {
           order: 2;
           flex: 1 0;
-
+          width:  0; // this might be a strange workaround
           &.left {
             order: 1;
           }