Is there a bug in Firefox when using the multicolumn columns property with Flexbox?

Could this be a compatibility issue with Firefox?

The layout appears fine in Chrome or when I take out columns: 2, then it also displays correctly in Firefox.

div {
  width: 500px;
  padding: 2rem;
  display: inline-flex;
  align-items: baseline;
  border: 1px solid red;
}

h1, p {
  margin: 0;
  padding: 0
}

p {
  margin-left: 2rem;
  columns: 2;
}
<div>
  <h1>Lorem ipsum dolor sit amet.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad qui repudiandae ipsum delectus fugiat esse voluptates numquam nesciunt, officiis, repellendus consequuntur optio. Tempora magni aliquam, nulla fuga quam deserunt veritatis.</p>
</div>

Visit codepen

cssfirefoxflexboxcss-multicolumn-layout

Answer №1

It's evident that the rendering of layout in Firefox and Chrome differs when utilizing the columns property. While Firefox shows an impact, Chrome does not.

Arguably, Chrome may have the more accurate implementation.

The application of the columns property should not affect a flex container.

In accordance with the flexbox spec:

3. Flex Containers: the flex and inline-flex display values

Flex containers do not adhere to block layout properties as they are not block containers. Hence, certain properties designed for block layout do not apply in the context of flex layout. Specifically:

  • the column-* properties outlined in the Multi-column Layout module have no bearing on a flex container.
  • float and clear do not float or clear flex items nor remove them from flow.
  • vertical-align does not influence flex items.

I mention it "appears" that Chrome is correct because technically, the specification states that columns should not impact "on a flex container." However, in this scenario, columns is applied to a flex item, raising the question of whether the rule applies.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dropbox menu within an extended webpage

I am looking to create a dropdown menu that behaves like the one on this website. The goal is for the dropdown to cover the entire webpage, hide the scroll bar, and "unmount" the other elements of the page, while still displaying them during the transition ...

javascriptjquerycssreactjsecmascript-6

Ensure that Roboto font is utilized on IE 11 and Edge browsers

My goal is to implement the Google Roboto font in my project, but I'm noticing that it doesn't display properly in IE11 / Edge browsers. Below is a snippet of my code: <!DOCTYPE html> <html> <head lang="en"> <meta charse ...

htmlcssfontsroboto

Efficiently reducing the size of a CSS selector string with javascript

Is there a library that already performs this function? I've only been able to find online tools. The reason I am interested in accomplishing this task using JavaScript is because I need to ensure that the strings a > b, a and a> b,a are conside ...

javascriptjquerycss

What's the best way to navigate across by simply pressing a button located nearby?

Hey there! I'm new to JavaScript and I'm working on a shopping list page for practice. In my code, I can add new items to the list, but what I really want is to be able to cross out an item when I click the "Done" button next to it, and then uncr ...

javascripthtmlcssdom

"Exploring the world of JavaFX: Unveiling the mysteries

Here are some CSS queries: How can I create a semi-transparent color using a color variable in CSS? * { -my-color: #123456; } .label { -fx-text-fill: ??? } What should be inserted in "???" to achieve a 50% opacity version of -my-color? Is it be ...

cssjavafx

What is the best way to implement a dropdown menu with JavaScript or jQuery?

I'm looking to create a dynamic dropdown list using Javascript or JQuery that mirrors the functionality of selecting countries, states, and cities. Can someone provide guidance on the best code to achieve this? Below is a snippet of my existing code: ...

javascripthtmljquerycssbootstrap-4

The presence of inline display causes gaps of white space

Located at the bottom of this webpage is a media gallery. The initial three images comprise the photo gallery, followed by video thumbnails inlined afterwards. However, there seems to be an issue with the alignment of each element within the video gallery. ...

htmlalignmentcss

What is the best way to center text within a div that is wider than 100%?

On my webpage, I have a header set to 100% width and text positioned on the banner. However, when zooming in or out, the text's position changes. How can I ensure that the text stays in place regardless of zoom level? Example: jsfiddle.net/5ASJv/ HT ...

csshtml

The background image's fadeInOut transitions create a strange phenomenon where all the text appears in white

So, here's a strange issue I'm facing. On my website, the background image changes with a smooth fadeIn/Out transition. Video: Website in action: Here is the HTML markup: <div class="fondo" onclick="descargar(2,500);descargar(1,500);"> ...

javascriptjquerycssopacity

How can I align two inner boxes vertically in the most efficient manner?

.dd{ height:100px; width:100%; border:1px soild red; background:#000; } .dd .d1{ height:20px; width:20px; border:1px solid green; display:inline-block; } .dd .d2{ height:20px; width:20px; border:1px solid green; display:inl ...

javascriptcssalignmentvertical-alignment

The Javascript style.opacity function eliminates the leading zero from the input string

In my application, users have the ability to change the color of the background but not the pattern. They can adjust the background behind the pattern and the opacity of the pattern. Users are prompted to input a percentage, which is actually a number betw ...

javascripthtmlcss

Using the flexslider to override CSS styles in an <li> element

I have implemented the flexslider by whoothemes on my responsive website to showcase tiles. However, I am facing an issue with setting a specific width for the tiles on various devices. Upon inspecting with Chrome, I see this code: <li style="width: 21 ...

jquerycssstyleshtml-listsflexslider

Align navigation items in the center of the navigation container

I've been grappling with aligning the content of a nav-item inside a nav container in my project. I'm unable to apply a margin on the ul>li items as it doesn't adjust properly on different resolutions. I've tried using percentages, b ...

htmlcssbootstrap-4

Tips for concealing elements beyond div boundaries

First and foremost, I want to mention that my focus is on studying frontend development, so I could really use some assistance with a task. I am looking to create a tab slider where the content on the left and right will flank it, ensuring the tab slider ...

htmlcsshide

Incorporating Keyboard Features into Buttons

How can I toggle the page selectors in #pageList using a keyboard shortcut instead of clicking on the .togglePL button? I've tried looking up solutions online and asking questions here, but haven't found a working solution yet. Below is the code ...

javascriptjqueryhtmlcss

Creating a flexible grid layout in CSS without relying on any pre-made frameworks

Suppose I am working with the following HTML structure <div class="option"> <input type="checkbox" /> <label>Checkbox</label> </div> <div class="option"> <input type="checkbox" /> <label>Chec ...

htmlcss

The scrollbar CSS appears to be missing on iPhone browsers Chrome and Safari

After spending the entire day searching for a solution to override the irritating scrollbar issue on my iPhone, I came across this simple example: .scroller { background: lightblue; height: 1000px; max-width: 400px; margin: 90px auto; padding: ...

htmlcss

Styling with CSS: A guide to reducing paragraph margins within a div element

My current project involves using javascript to dynamically insert paragraphs inside a div element. Essentially, the script grabs the value entered into an input form when a button is clicked and adds it as a new paragraph within a specific div. However, I ...

javascripthtmlcssmarginappendchild

What causes getBoundingClientRect() in Javascript to occasionally produce decimal values?

Currently, I am experimenting with an HTML5 canvas element. A major concern of mine is setting up a mousemove event to monitor the movement of the mouse over the canvas for drawing and other purposes. Unfortunately, I have not been able to locate a definit ...

javascriptcsshtmlcanvas

Regular expression for matching a CSS definition that includes a specific name and value

Looking to match all CSS definitions with the name "test" and color set to gray? Here are a few examples: a.test { color: grey; } or .test { color: grey; }, as well as a.test:after, a.test { font-size: 10px; color: gray; } It's important to consider ...

cssregex