Understanding the Intrinsic Dimensions of Replaced Elements in CSS

I'm currently facing some challenges with the CSS Intrinsic & Extrinsic Sizing Module Level 3, specifically chapter 4.1 on Intrinsic Sizes.

This section is proving to be quite difficult for me:

When a block-level or inline-level replaced element has its height or width set to auto, it essentially uses its max-content size (CSS2§10.3.2)...

Background and Inquiry:

  • The term "max content size" refers to shrink-to-fit within an infinite containing block.
  • This means no soft wrap opportunities are considered, allowing the element to reach its maximum size without any forced adjustments with properties.
  • I can't seem to find this specific behavior outlined in CSS2§10.3.2 for elements where only one dimension is set to auto.
  • In fact, CSS2§10.3.2 doesn't address a scenario where an element has only one dimension as auto and lacks intrinsic size or aspect ratio (as indicated by the "OR" in the quoted text above).
  • Which part of CSS2§10.3.2 is being referenced here?
htmlcss

Answer №1

The concept of 'auto' width is detailed in section 10.3.2, which explains:

... if the 'width' property has a computed value of 'auto', while the 'height' property has a different computed value, and the element possesses an intrinsic ratio; then the actual value for 'width' will be:

(used height) * (intrinsic ratio)

The scenario where 'auto' height comes into play is discussed separately in section 10.6.2, stating:

... if the 'height' property has a computed value of 'auto', and the element exhibits an intrinsic ratio, then the calculated value for 'height' becomes:

(used width) / (intrinsic ratio)

Lastly, when both height and width are set to 'auto', with no intrinsic dimensions but an intrinsic ratio present, section 10.3.2 addresses this by indicating:

In situations where 'height' and 'width' are both computed as 'auto' and the element features an intrinsic ratio but lacks intrinsic height or width, the final result for 'width' is undefined within CSS 2.2.

This guideline is further elaborated in css-sizing 4.1, specifying:

this specification applies the rules above to the ambiguous scenario of a replaced element with both height and width set as auto.

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

Ways to define css attributes for the "before" and "after" pseudo elements in the DOM

I'm looking to modify the color of the "border-left" property from its default red to a different color within the scope, such as blue. .hello:before { content:' '; display:inline-block; width: 22px; height: 25px; ...

htmlcss

`I am facing issues with class binding in Vue 3 when using SwiperJS`

Currently, I am working with Vue 3 along with swiperjs. I have encountered a problem related to the v-bind:class behavior in my project. The issue arises when transitioning to the second slide, where the !h-auto class does not get applied as expected. St ...

javascriptcssvue.jstailwind-cssswiper.js

The route seems to be downloading the page instead of properly rendering it for display

I'm facing a simple issue with my Express page - when I navigate to the FAQ route, instead of displaying the page it downloads it. The index page loads fine, and the FAQ page is the only other page available at the moment. I am using EJS templating, a ...

javascripthtmlexpressroutes

Using the ternary operator in various CSS rules

Inside a .hover() function, I've written the code below: $(this).css('background-position', circle.includesXY(e.pageX, e.pageY) ? 'bottom' : ''); I'm wondering how to include additional property:value pairs within ...

jquerycssternary-operator

What is the best approach to decrease the size of a button in HTML and CSS when the text size is also reduced?

Check out this code snippet! I'm new to coding, so let me know if you see any errors or ways it could be improved. button { font-size: 10px; font-family: roboto, Arial; color: white; background-color: rgb(59, 102, 241); border-radius: 100p ...

htmlcss

Creating a gap between two rows within a Bootstrap table

Is there a way to create space between two bootstrap table rows? I am looking for something like this: --------- | A B | --------- --------- | C D | --------- --------- | E F | --------- Here is the code snippet: <script src="https://cdnjs.c ...

htmlcssbootstrap-4row

Tips for Removing Padding in Material UI Container Component

I'm currently working on creating a hero banner using the material-ui framework and I've encountered an issue. Here's what I have so far: https://i.stack.imgur.com/UXTDY.png However, I'm facing an irritating problem with left and rig ...

javascriptcssreactjsmaterial-ui

Tips for retrieving user input and displaying it on an HTML page

I have encountered an issue with displaying user input in a table. The code for the table display is as follows: <tr ng-repeat="user in users" ng-class-even="'bg-light-grey'" ng-if="isLoading==false"> <td> ...

javascripthtmlangularjs

Tips for overlaying text on an image in html with the ability to zoom in/out and adjust resolution

My challenge is aligning text over an image so that they move together when zooming in or out. However, I am facing difficulties as the text and image seem to move in different directions. I have attempted using media queries and adjusting the positions of ...

htmlcssangularbootstrap-4

Review Limited Screen Size for a Smartphone Website

I have been working on optimizing a mobile website and I utilized CSS to adjust the layout design for screen widths between 150px and 480px. However, during testing on an actual phone, the desktop layout is appearing instead of the custom layout set with C ...

javascriptphpcsshtml

Combining a pair of canvases

Currently, I am utilizing a JavaScript library to create a QR Code. This library generates the QR code by displaying it on a canvas. Nevertheless, my goal is to integrate a background behind this QR Code. I attempted to achieve this by first drawing the b ...

javascripthtmlangulartypescripthtml5-canvas

How can I make my Twitter Bootstrap carousel actually start "carousel"-ing?

I often find myself in over my head with programming, but I am giving it my best shot. Please be patient with me! Recently, I followed a tutorial on YouTube to create a carousel in my Django project. Unfortunately, instead of displaying one image at a ti ...

htmldjangotwitter-bootstrapcarousel

Using Tailwind CSS to set the margin of an element at certain breakpoints is not functioning as expected

I attempted to customize the margin of a div element at specific screen sizes by using a {screen}: prefix, but it did not have the desired effect. Here is what I tried: <div className={'flex justify-center'}> <div className={'w-fu ...

csspluginsthemesnext.jstailwind-css

CSS - Issue with table cell height exceeding in Mozilla Firefox and Internet Explorer

Examining the code below <div style="border:solid 5px orange;width:400px;height:400px"> <div style="display:table;border:solid 1px red;width:100%;height:100%"> <div style="display:table-row;border:solid 1px blue"> <div sty ...

csshtmlwebcss-tables

Strategies for positioning a fixed div at the bottom of another div

I'm in the process of creating a digital restaurant menu... I decided to format it as a popup, situated within a fixed container on top of a gray transparent overlay. However, with a large number of dishes, the content exceeds the size of the containe ...

htmlcssscrollpopupcss-position

Detecting the presence of a file on a local PC using JavaScript

In the process of creating a Django web application, I am exploring methods to determine if a particular application is installed on the user's local machine. One idea I have considered is checking for the existence of a specific folder, such as C:&bs ...

javascripthtmldjangofile

Creating a scrollable card layout specifically for small screens in HTML

I am looking to implement a horizontal scroll (for small screens only) within my card layout so that all cards are displayed in a single row. Here is an example: For small screens: So far, I have added horizontal scrolling to the container-fluid (card la ...

htmlcssscroll

JavaScript Function that Automatically Redirects User or Updates Text upon Clicking "Submit" Button

Looking to create JavaScript functionality that directs users back to the homepage after submitting their name and email. The process should follow these steps: 1.) User clicks "Request a Brochure..." 2.) A window opens in Portrait format, 400 x 350. Use ...

javascriptphpjqueryhtmlforms

Completes a form on a separate website which then populates information onto a different website

Creating a website that allows users to login and view various complaint forms from government websites or other sources. When a user clicks on a link to file a complaint, they will be redirected to the respective page. However, I am looking for a way to ...

javascripthtmlnode.jsformsexpress

Sort out the table using Javascript and then choose all the checkboxes

I'm struggling with a function in Javascript that will only check checkboxes on visible rows of an HTML table. The table has a checkbox on each row and is filtered based on a textbox above the table. The checkboxes in the table are named chkbuild, an ...

javascriptphphtmlfiltercheckbox