{"id":2886,"date":"2016-06-16T17:39:06","date_gmt":"2016-06-16T17:39:06","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=2886"},"modified":"2016-06-16T17:41:18","modified_gmt":"2016-06-16T17:41:18","slug":"yahoo-mail-adds-overflowauto-to-max-width","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/yahoo-mail-adds-overflowauto-to-max-width\/","title":{"rendered":"Yahoo! Mail adds overflow:auto to elements with max-width and max-height"},"content":{"rendered":"<p>Last week, the <a href=\"https:\/\/twitter.com\/moonstrips\/status\/740067376645836800\">email geek-verse blew up<\/a> when certain emails especially hybrid coded emails started breaking in Yahoo! Mail. Although Yahoo! Mail and Gmail has always converted height to min-height, Yahoo! Mail went the extra mile and began converting <i>width<\/i> to <i>min-width<\/i> as well. <\/p>\n<p>This is a problem because hybrid emails frequently limit <em>width<\/em> with <em>max-width<\/em> (ie. width:600px;max-width:100%). However unlike <em>width<\/em>, <em>min-width<\/em> prevents <em>max-width<\/em> from overriding its value. Thank goodness after the outcry, this was <b>reverted<\/b> shortly.<\/p>\n<p>However there was <b>another<\/b> change that didn&#8217;t get reverted and it has the effect of adding scrollbars to certain large divs. Basically Yahoo! Mail now appends overflow-x:auto to inline max-width styles and overflow-y:auto to inline max-height elements<\/p>\n<p>Mosaico has a <a href=\"https:\/\/mosaico.io\/email-client-tricks\/about-unexpected-scrollbars-in-yahoo-webmail\/\">good writeup<\/a> on this issue as well as some possible workarounds.<BR><BR><BR><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Last week, the email geek-verse blew up when certain emails especially hybrid coded emails started breaking in Yahoo! Mail. Although Yahoo! Mail and Gmail has always converted height to min-height, Yahoo! Mail went the extra mile and began converting width to min-width as well. This is a problem because hybrid emails frequently limit width with [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":165,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[48,28,46],"tags":[],"_links":{"self":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/2886"}],"collection":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/comments?post=2886"}],"version-history":[{"count":8,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/2886\/revisions"}],"predecessor-version":[{"id":2894,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/2886\/revisions\/2894"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media\/165"}],"wp:attachment":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media?parent=2886"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/categories?post=2886"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/tags?post=2886"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}