From bdb819739f1e9fbccbf735de00998b6d0e0fd275 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Thu, 4 Aug 2016 20:38:02 +0200 Subject: [PATCH] fix(list): secondary container should not shrink in safari MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Per W3C: https://www.w3.org/TR/css-flexbox/#flex-common > By default, flex items won’t shrink below their minimum content size. Safari doesn't follow that specification due to a bug and expects the developer to explicitly disable flex shrinking. > https://bugs.webkit.org/show_bug.cgi?id=146020 Fixes #9235. --- src/components/list/list.scss | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/list/list.scss b/src/components/list/list.scss index 4991a10c529..04c38056692 100644 --- a/src/components/list/list.scss +++ b/src/components/list/list.scss @@ -288,13 +288,15 @@ md-list-item { display: flex; align-items: center; - // The secondary container is now static and needs to be aligned at the end of its parent. - // - Using an absolute position will cause much issues with the overflow. - // - Using a flex-filler, which pushes the container to the end of the parent is working - // but breaks the users list-item layout. + // Per W3C: https://www.w3.org/TR/css-flexbox/#flex-common + // By default, flex items won’t shrink below their minimum content size. + // Safari doesn't follow that specification due to a bug and expects the developer to + // explicitly disable flex shrinking. + flex-shrink: 0; + // Using margin auto to move them to the end of the list item is more elegant, because it has - // a lower priority than the flex filler and isn't introducing overflow issues again. - // The margin on the top is also important to align multiple secondary items vertical correctly. + // a lower priority than a flex filler and isn't introducing any overflow issues. + // The margin on the top is important to align multiple secondary items vertically. margin: auto; @include rtl(margin-right, 0, auto);