chrome v48+. layout issue of flex box.

[tori3]

When using flex box and overflow: hidden on chrome v48+, will occur layout problem.
Can you modify using amp.js for this issue?

Sample code
http://jsbin.com/qujuhifufo/edit?html,js,output

Related URL
angular/material#6841 (comment)

If you add the bellow css, does not occur issue.
But * may not be used in author stylesheets.
https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#universal-selector

* {
  min-width: 0px;
}

http://jsbin.com/qujuhifufo/edit?html,js,output

• chrome v48+ (android, mac..)
• amp-version="1462999126709"

[dvoytenko]

@jridgewell @sriramkrish85 It looks like min-width: 0px is only needed on the body. Does anyone know why? It looks like the behavior is the same on Chrome and Firefox, but not on iOS.

[dvoytenko]

/to @jridgewell for now.

[jridgewell]

This is also fixed by using:

body {
  width: 100%;
}

Note that it's not directly related to the body. It happens when we have two flex containers A and B (B is a child of A). In that case, we must specify a width on B.

I think this is instead an issue with the crazy way we define responsive images.

---

overflow: hidden seems to have nothing to do with it, we just need something wide enough to overflow the body.

iOS is unaffected because we define width

[dvoytenko]

@jridgewell So, the recommendation is to just define width: 100% on body in all cases?

[camelburrito]

I would say , lets recommend not making body a flex-box?

[dvoytenko]

@sriramkrish85 @jridgewell Correct: we need to be very careful allowing to change display of the body. It's easy enough to add an extra div if needed.

However, I think it's totally reasonable to add width: 100% on body if there are no negative consequences.

I think this is instead an issue with the crazy way we define responsive images.

I don't think there's anything really crazy about them. I believe they simply take the available width which is simply much bigger here then the viewport's width. I've no idea, however, why min-width: 0 fixes this.

[jridgewell]

However, I think it's totally reasonable to add width: 100% on body if there are no negative consequences.

That doesn't solve the generic issue, though. I think this is a user beware: you're CSS can affect the page layout.

I don't think there's anything really crazy about them. I believe they simply take the available width which is simply much bigger here then the viewport's width. I've no idea, however, why min-width: 0 fixes this.

Why don't we define the width to be the viewport width?

[dvoytenko]

@jridgewell

That doesn't solve the generic issue, though. I think this is a user beware: you're CSS can affect the page layout.

Agree. Let's do. But under experiment.

Why don't we define the width to be the viewport width?

Sorry, can you clarify? Viewport width = width for what?

[jridgewell]

Agree. Let's do. But under experiment.

Do what?

Viewport width = width for what?

The <amp-img> tag. Why don't we define it's width (or max-width) to be 100vw, so that they never do this.

[dvoytenko]

Do what?

Set body width to 100%.

The tag. Why don't we define it's width (or max-width) to be 100vw, so that they never do this.

The responsive width is defined not in terms of viewport width, but in terms of how much space the image has. E.g. based on the parent element's width + padding. Viewport width doesn't give us that.

[dvoytenko]

@tori3 So to sum this up. To fix the situation right now you need to either (a) move display: flex from the body to a nested div, or (b) add CSS body {min-width: 0;} - both will fix this issue.

We will research and make decision on whether our body needs width: 100% separately in the #3318.

[jridgewell]

Closing this with #3270 (comment).

[tori3]

@dvoytenko @jridgewell Thank you for giving me good advice.