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:
- Hide marker
- 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:
- 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 withjustify-content:center
the margin will overflow equally from both sides that's why you think it's not applied. - You are facing the
min-width
constraint of flexbox which is forcing you to setwidth: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
Div with a Transparent Cut Out Circle
How to Imitate the Look of the Outline and Label from Material-Ui's Outlined Textfield
CSS - Use Counter() Number as Property's Value
CSS Changes on MVC App Not Working
Google Fonts: Define Custom Name in CSS
Border-Radius: 50% Not Producing Perfect Circles in Chrome
Vertical Margins Disappear When Parent Is Set to Overflow:Visible
Stop PHPstorm File Watchers Running Recursively (With Autoprefixer)
How to Listen to the End of a Bootstrap Animation
How to Remove a CSS Class from a Jqgrid Cell
Article Push/Pull Alignment Using Bootstrap 3
Angular 2 Material and Flex-Layout Alignment
Taghelpers Add Custom Class for Labeltaghelper Based on Validation Attribute [Required]
What Is the Math Behind -Webkit-Perspective
Working with Zend Framework Flashmessenger and Jquery UI State Classes
Rotating CSS Cube on Fixed Axes
Css3: Two Transitions with Different Timing Functions (Css3)