When I place a flexbox inside a list item, the content is being pushed down by what seems to be a full line height.
I have tried various CSS properties like setting margin-top: 0 for the flexbox, margin-top: 0 for its children, adding flex-wrap to the flexbox, but nothing seems to work!
.wrapper {
display: flex;
}
li {
background: #ccc;
}<ul>
<li>
<div class="wrapper">
<div>hello</div>
<div>world</div>
</div>
</li>
</ul>It appears that the issue is related to the ::marker pseudo-element.
The conflict arises from multiple specifications intersecting, making it unclear what the expected behavior should be.
list-item keyword::marker pseudo-element in CSS Pseudo-Elements 4This situation is complicated because these are still proposals under development and not yet suitable for implementation. A warning in CSS Lists 3 - Positioning Markers highlights this concern:
This section is not ready for implementation. It is an unreviewed rough draft that hasn't even been properly checked for Web-compatibility. Feedback is welcome, but avoid using this part of the spec.
An analysis of how Chrome handles markers internally follows.
To simplify, applying list-style-position: inside to a list item with containing blocks yields:
Illustration:
Of note is the marker overlapping the div but adjusting its first line box like floats typically do.
A float should not overlap a formatting context root. For instance, display: inline-block establishes a block formatting context.
Example:
Subsequently, while displaying some float-like characteristics, it operates differently than a traditional float element.
Observations continue regarding various scenarios and how Chrome processes them, including cases involving inline-flex and flex display properties.
Contrasting behaviors of Chrome and Firefox also come into focus when handling markers in different situations.
To fix the issue, simply change the .wrapper from display: flex to inline-flex. You can see the updated code in this demo.
Another solution is to set the list-style-type to none. Thanks to @Ricky_Ruiz for this tip. Check it out in this demo.
The issue exists in Chrome, Edge, and IE11 while the original code works fine in Firefox and Safari.
The cause of the behavior is currently unknown. There seems to be some restriction (possibly due to a marker) preventing access to the top section of the li element by its children.
(UPDATE: A detailed explanation has been provided in another answer.)
During testing...
padding and margin from ul and its descendants did not solve the issue.line-height and vertical-align also proved unsuccessful.Setting an equal height on all elements revealed that something is causing the flex container to render lower than expected and overflow its parent.
ul {
padding: 0;
margin: 0;
height: 100px;
border: 1px solid black;
}
li {
padding: 0;
margin: 0;
background: #ccc;
height: 100%;
}
.wrapper {
display: flex;
padding: 0;
margin: 0;
height: 100%;
border: 1px dashed red;
}<ul>
<li>
<div class="wrapper">
<div>hello</div>
<div>world</div>
</div>
</li>
</ul>To fix this issue, simply include the CSS property display: block in the styling of the li element. By default, browsers will render li elements as list items, so explicitly setting them to display as blocks resolves the problem. The flexbox specifications do not address this directly; they only cover block, inline, and inline-block elements, along with table-cell elements which behave like block-level flex items.
This issue seems to only occur in mobile mode, where the blueviolet line is coming from the background color. https://i.stack.imgur.com/VBhIp.png link to the image body { background-color: blueviolet; } header, main, footer { background-color: #ff ...
Trying to concatenate the HTML text with the values of item.certificate_name has been a challenge for me. I've experimented with various methods, but none of them seem to work. The specific line I'm referring to is where I wrote . I have alread ...
In my current setup, I have a traditional array where each element represents an HTML element. The issue arises when I manipulate these elements within the array; any changes made to the HTML element also reflect in the array automatically. However, I pref ...
I'm working on a project that involves creating a cartoon version of a record player. I want to incorporate an animation where the play button on the side toggles the spinning motion of the record using webkit, while also starting the audio track. The ...
I am facing an issue in accessing the current margin-left CSS property of the class .circle in the code snippet below. A demonstration of this problem can be found on a website called PLUNKr. The reason I need to access this property is because I have to ...
I am facing an issue with a form inside a modal in my Rails application. When I click on the submit button, nothing happens. How can I use Ajax to submit the modal form and save its content on another page? <button type="button" class="btn btn-primary ...
Is it feasible to create using only Javascript without utilizing any Java functions? Is there a way to access values from elements like labels, tables, or charts by calling them from an HTML button? I am currently working with Openlayers and BIRT. I need ...
Is there a way to have both paragraphs and unordered lists contained within the same border? I initially thought I could achieve this by placing the list inside the paragraph tag, but that does not seem to work. Below is a snippet of my external style sh ...
After updating the CSS stylesheet, I noticed a white space below my footer. A screenshot has been included for reference. Despite including a CSS reset, the issue still persists. /* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author ...
When attempting to create a loop in JQuery to remove elements from my HTML, I encountered an issue where the function caused my browser to hang and become unresponsive. Here is the JQuery code I used: function removeElement(){ var i =0; ...
I need a specialized input field that only accepts negative or positive values with decimals, followed by predefined units stored in an array. Examples of accepted values include: var inputValue = "150px"; <---- This could be anything (from the input) ...
When incorporating a Subform named "Step1," your code will look like this: <dl class="zend_form"> <dt id="Step1-label"></dt> <dd id="Step1-element"> <fieldset id="fieldset-Step1" class="Step"> < ...
I am currently attempting to register on . The registration process requires entering my first name, last name, email address, and password. For the first name field, I attempted to locate the element by CSS using the syntax "input#name_fname", however, I ...
Could someone please explain why I am unable to add margin-top/bottom or padding-top/bottom to this "a" tag? I am trying to center "Konoha" in the header box. html{ background-color: white } body{ width: 88.5%; height: 1200px; margin: 0 auto; borde ...
I have written a code that displays a series of images in a sequence. Once the last image appears, I want to switch the class from .d-none to .d-block on the div Can this be achieved? onload = function startAnimation() { var frames = document.getE ...
When rendering a drop down box, I include a currently selected value using selected="true". <select id="dropDown"> <option selected="true" value="1">value2</option> <option value="2">value3</option> <option va ...
Having some trouble making a text box value change based on checkbox status. I've attached a function to the onclick event of the checkbox, but it's not quite working as expected. <div> MyCheckbox <input type="checkbox" id="Check1" name ...
I am currently facing an issue where I am trying to display all the nodes of a specific tag in XML. Although it does filter the data correctly, only one node is showing up. Is there anyone who can assist me with this problem? Below is the XML content: < ...
My latest project involved creating a quiz program using only PHP. The program consists of 4 different questions and radio buttons, and when an option is selected, the value of the radio button (A, B, C, or D) should be printed. I have set up 4 PHP varia ...
Within my React Native application, I have implemented the following code: <View style={{ width: 50, height: 50, borderWidth: 1, }} > <View style={{ width: 5, height: 5, backgroundColor: 'red', top: 10, ...