List with Nested 'Overflow-X: Hidden' Hides List Counter/Point - Why/Is This a Bug

List with nested `overflow-x: hidden` hides list counter/point - why/is this a bug?

Your understanding is correct; the list number (known in CSS as a list marker) should exist outside the p, not inside it. That should be the case even if you specify list-style-position: inside because like you said, you're applying overflow to the p, not the li.

Every list item in general creates a principal block box for its children, and another box for the marker to reside in. The child elements should all be rendered within the principal block box. From the CSS2.1 spec:

CSS 2.1 offers basic visual formatting of lists. An element with 'display: list-item' generates a principal block box for the element's content and, depending on the values of 'list-style-type' and 'list-style-image', possibly also a marker box as a visual indication that the element is a list item.

A slightly more detailed explanation of principal block boxes can be found here.

In your case, each li creates a principal block box and a marker box. The p.overflow-hidden elements should reside in the principal block box and not affect the marker. Here's a crude ASCII art diagram to show what I mean:


list
marker li principal block box
+-----+ +----------------------------+
| | |+--------------------------+|
| • | || Moo (p block box) ||
| | |+--------------------------+|
+-----+ +----------------------------+

Now, the spec seems vague about the positioning of the marker box itself, but it does say that the marker box is separate from the principal block box when list-style-position is outside. It does seem to imply also that a browser could get away with placing the marker box in the principal block box so long as the marker content actually resides by itself in that marker box (which, incidentally, cannot be targeted with CSS as yet).

But Safari and Chrome appear to be doing something very different altogether: they seem to be putting the marker box not only within the principal box, but within the first child of the principal block box. That's why it gets cut off when positioned outside the p block box: because the rendering engine sees it as part of the p content, sees that it's out of its horizontal bounds, and cuts it off. (I suspect it gets clipped with overflow-y: hidden as well because it's positioned beyond the left edge, which shouldn't normally happen in LTR mode, but that's just a wild guess.)

When you add list-style-position: inside to the li, other browsers correctly shift the p block box beneath the marker, but Safari and Chrome simply move the marker into the p box. Although CSS2.1 says that it doesn't define the exact position of a list marker with respect to the list item's principal block box, it does say this about list-style-position: inside:

inside
The marker box is placed as the first inline box in the principal block box, before the element's content and before any :before pseudo-elements.

That's clearly not what Safari and Chrome are doing with the marker box.

Again, the spec is (rather deliberately) not 100% clear about this, but I would certainly not expect the list marker to be a child of, or be affected by, any of the li's child elements the way it appears to in Safari and Chrome. I'm pretty sure this is incorrect behavior, i.e. a bug.

overflow:hidden on div in ordered list affects li, Chrome bug?

Well, this is a kind of a hack, but it works. Adding a pseudo :before-element brings back the list style, as the li will have some content now. Bring back the div to the top and it looks like nothing has changed.

CSS

ol > li:before {
content: '';
display: block;
height: 1px;
}

div {
margin-top: -1px;
}

Demo

Try before buy

Block with overflow: hidden inside list item moves down on Edge

How about making .overflow-hidden { display: inline-block; }? http://jsfiddle.net/G46dK/8

.overflow-hidden {
display: inline-block;
vertical-align: top;
overflow: hidden;
width: 100%;
}

Why overflow-y:hidden of HTML-lists makes bullet/number to be invisible?

From my reading, when you set overflow-y:hidden the overflow-x computed value is set to auto which is part of the CSS Spec.

Computed value: as specified, except with visible computing to auto if one of overflow-x or overflow-y is not visible.

...and overflow:auto

This value indicates that the box’s content is clipped to the padding box.

..and since the marker is outside of the li it's clipped and so hidden.

Strange behavior for list and overflow: hidden

Found next solution:

  1. Hide marker
  2. Create own marker use :before

Added CSS:

ul.test {
list-style: none;
padding-left: 0;
}

ul.test li {
position: relative;
padding-left: 40px;
}

ul.test li:before {
content: "●";
position: absolute;
left: 20px;
}

See: http://jsfiddle.net/er1hsabb/6/

All worked in Opera, FF, Chrome and IE 8+.

"Marker" size is bigger from default, but it may changed from CSS: http://jsfiddle.net/er1hsabb/7/

webkit shows bullet behind floated elements in list

As pointed out by @silviagreen this is a webkit-specific bug but as a workaround I suggest to add a transparent border to the list-item. This seems to properly work (but I honestly admit that I can't figure out why this should work)

li {
border: 1px transparent solid;
}

https://jsfiddle.net/rjkz7ny1/


Other approaches suggest to change float: left into display: inline-block or to give clear: left to the list, but I feel these workarounds a bit too substantial (and not always appliable) than adding a trasparent border.

Flexbox child with overflow: hidden overflowing grandparent margins

You mainly have two issues:

  1. You are setting width:100% to the wrapper and this doesn't account for margin so you will logically have overflow and since the body is a flex container with justify-content:center the margin will overflow equally from both sides that's why you think it's not applied.
  2. You are facing the min-width constraint of flexbox which is forcing you to set width:100% thinking it's the good solution. This same constraint is also preventing the element from shrinking lower than the 100% you specified (related: Why is a flex item limited to parent size?)

To fix this you need to remove width:100% from wrapper and consider min-width:0 instead. You can also remove the min-width applied to .L and you need to consider flex-shrink:0 on .R (or replace its width by min-width)

body {  background-color: #000;  color: #FFF;  display: flex;  justify-content: center;}
.wrapper { margin: 0 1.5rem; max-width: 40rem; min-width:0;}
.fit_content_box { display: flex; align-items: center;}
.L { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.R { margin-left: 1rem; flex-shrink:0; height: 1rem; width: 1rem; background-color: #FFF;}
.overflow { display: flex; justify-content: space-between;}
.overflow>div { width: 0; display: flex; justify-content: center;}
<body>  <div class="wrapper">    <div class="fit_content_box">      <p class="L">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="R"></div> </div>
<div class="overflow"> <div> <p>0</p> </div> <div> <p>12</p> </div> <div> <p>24</p> </div> </div> </div></body>

Hide overflow on elements with fixed position

Unfortunately it seems to be impossible to nest a fixed element within another element (fixed or not) and expect the outer element to wrap it and hide any overflow.

The only thing I can think of is setting the inner div to position:absolute instead of fixed. Here is an example based on your jsfiddle: jsfiddle.net/pjFa6/15 .

border radius + overflow hidden + inner element (progress bar) makes jagged edge artifacts

Adding an extra wrapper helps mitigate your issues with 0 & 1%:

http://jsfiddle.net/p197qfcj/11/

HTML

<div class="outer-tray">
<div class="tray">
<div class="fill"></div>
</div>
</div>

CSS

body {
background: #ccc;
}
.tray {
/* overflow: hidden; */
height: 20px;
background: #000;
border-radius: 50px;
height: 30px;
width: 100%;
border: none solid transparent;
background-color: black;
}
.fill {
background: #fff;
width: 10%;
border-radius: 100px;
left: -1px;
position: relative;
float: left;
box-sizing: border-box;
border: 1px solid white;
top: -1px;
height: 32px;
}
.outer-tray {
overflow: hidden;
border-radius: 100px;
overflow: hidden;
display: block;
}


Related Topics



Leave a reply



Submit