Support for CSS3 overflow-x and overflow-y properties #1665

Open
art-solopov opened this Issue Jun 16, 2015 · 28 comments

Comments

Projects
None yet
@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Jun 21, 2015

Contributor

http://dev.w3.org/csswg/css-overflow/ (CSS Overflow Module Level 3)

Contributor

cvrebert commented Jun 21, 2015

http://dev.w3.org/csswg/css-overflow/ (CSS Overflow Module Level 3)

@FireCoding

This comment has been minimized.

Show comment
Hide comment

+1

@phillq

This comment has been minimized.

Show comment
Hide comment
@phillq

phillq Feb 22, 2016

+1
Don't know why this isn't already added? Anyone knows why? It's quite a popular feature.

phillq commented Feb 22, 2016

+1
Don't know why this isn't already added? Anyone knows why? It's quite a popular feature.

@Schweinepriester

This comment has been minimized.

Show comment
Hide comment
@Schweinepriester

Schweinepriester Mar 1, 2016

Contributor

+1

@phillq maybe because the basic functionality is quite old?

Contributor

Schweinepriester commented Mar 1, 2016

+1

@phillq maybe because the basic functionality is quite old?

@350d

This comment has been minimized.

Show comment
Hide comment

350d commented Apr 13, 2016

+1

@keeper0811

This comment has been minimized.

Show comment
Hide comment

+1

@charleskoehl

This comment has been minimized.

Show comment
Hide comment

+1

@Javid-Izadfar

This comment has been minimized.

Show comment
Hide comment
@hallvors

This comment has been minimized.

Show comment
Hide comment

+1 :)

@xrochoa

This comment has been minimized.

Show comment
Hide comment

xrochoa commented Jul 13, 2016

+1

@artfulrobot

This comment has been minimized.

Show comment
Hide comment

+1

@TheBigMost

This comment has been minimized.

Show comment
Hide comment

+1

@system-addict

This comment has been minimized.

Show comment
Hide comment
@s-leger

This comment has been minimized.

Show comment
Hide comment

s-leger commented Oct 9, 2016

+1

@rohozhnikoff

This comment has been minimized.

Show comment
Hide comment

+1

@SimonMARTIN87

This comment has been minimized.

Show comment
Hide comment
@Kinifwyne

This comment has been minimized.

Show comment
Hide comment

+1

@webmasterMeyers

This comment has been minimized.

Show comment
Hide comment
@webmasterMeyers

webmasterMeyers May 25, 2017

+1 this is supported is it not? I thought it was, then I double checked on caniuse and now I am not so sure. w3schools shows it is supported.

+1 this is supported is it not? I thought it was, then I double checked on caniuse and now I am not so sure. w3schools shows it is supported.

@theUtilitariat

This comment has been minimized.

Show comment
Hide comment
@ClaudioFloreani

This comment has been minimized.

Show comment
Hide comment
@csaetre

This comment has been minimized.

Show comment
Hide comment
@csaetre

csaetre Aug 7, 2017

+1
Firefox (Gecko) still seems to handle overflow-y:scroll differently (or not at all) on certain elements.

csaetre commented Aug 7, 2017

+1
Firefox (Gecko) still seems to handle overflow-y:scroll differently (or not at all) on certain elements.

@rosebrt

This comment has been minimized.

Show comment
Hide comment

rosebrt commented Sep 12, 2017

+1

@holtjohnson

This comment has been minimized.

Show comment
Hide comment
@holtjohnson

holtjohnson Oct 19, 2017

For anyone who doesn't want to read through the spec sheets to figure out what CSS overflow Level 3 is, I read through them and this is what I got.

According to the spec sheets, overflow was defined in CSS Level 2.1 but didn't explicitly include overflow-x and overflow-y. Those were apparently added by browser developers. Level 3 aims to officially set the standard rules for these properties and add a new property called max-lines. From the intro to Level 3, I quote:

This specification introduces the long-standing de-facto overflow-x and overflow-y properties, and defines overflow handling more fully. - Link

The max-lines property doesn't appear fully defined at the moment, but the heading describes it as:

Limiting Number of Visible Text Lines - Link

CSS overflow Level 3 spec [draft]: https://drafts.csswg.org/css-overflow-3/
CSS overflow Level 2.1 spec: https://www.w3.org/TR/CSS2/visufx.html#overflow

P.S. There also appears to be a Level 4 spec draft, but it acknowledges that Level 3 is still a draft and must be finished first.

CSS overflow Level 4 spec [draft]: https://drafts.csswg.org/css-overflow-4/

P.P.S. Also see @jonathantneal's comment below about a detail I overlooked in the Level 3 spec.

holtjohnson commented Oct 19, 2017

For anyone who doesn't want to read through the spec sheets to figure out what CSS overflow Level 3 is, I read through them and this is what I got.

According to the spec sheets, overflow was defined in CSS Level 2.1 but didn't explicitly include overflow-x and overflow-y. Those were apparently added by browser developers. Level 3 aims to officially set the standard rules for these properties and add a new property called max-lines. From the intro to Level 3, I quote:

This specification introduces the long-standing de-facto overflow-x and overflow-y properties, and defines overflow handling more fully. - Link

The max-lines property doesn't appear fully defined at the moment, but the heading describes it as:

Limiting Number of Visible Text Lines - Link

CSS overflow Level 3 spec [draft]: https://drafts.csswg.org/css-overflow-3/
CSS overflow Level 2.1 spec: https://www.w3.org/TR/CSS2/visufx.html#overflow

P.S. There also appears to be a Level 4 spec draft, but it acknowledges that Level 3 is still a draft and must be finished first.

CSS overflow Level 4 spec [draft]: https://drafts.csswg.org/css-overflow-4/

P.P.S. Also see @jonathantneal's comment below about a detail I overlooked in the Level 3 spec.

@lembitk

This comment has been minimized.

Show comment
Hide comment

lembitk commented Jan 7, 2018

+1

@diogocorrea

This comment has been minimized.

Show comment
Hide comment

+1

@jonathantneal

This comment has been minimized.

Show comment
Hide comment
@jonathantneal

jonathantneal May 1, 2018

The CSS Overflow Module Level 3 specification has also changed the definition of overflow to allow 2 values: https://drafts.csswg.org/css-overflow-3/#propdef-overflow

html {
  overflow: hidden auto;
}

Available in Chrome 68.
Available in Firefox 61.
Issue tracker for WebKit.
Issue tracker for Edge.

Additional resources:
PostCSS Plugin

jonathantneal commented May 1, 2018

The CSS Overflow Module Level 3 specification has also changed the definition of overflow to allow 2 values: https://drafts.csswg.org/css-overflow-3/#propdef-overflow

html {
  overflow: hidden auto;
}

Available in Chrome 68.
Available in Firefox 61.
Issue tracker for WebKit.
Issue tracker for Edge.

Additional resources:
PostCSS Plugin

@jonathantneal jonathantneal referenced this issue in csstools/cssdb May 1, 2018

Closed

Add new overflow shorthand #24

@chrisblakley

This comment has been minimized.

Show comment
Hide comment

+1

@jasonrhaddix

This comment has been minimized.

Show comment
Hide comment

+1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment