Can you explain why using container-type: inline-size renders the span normally but collapses the button?
<span style="container-type: inline-size; outline: 1px solid blue;">
This is a span
</span>
<button style="container-type: inline-size;">
This is a button
</button>In short, containers cannot adjust to the size of their contents, and inline elements are not suitable for containing other elements.
Here's what's happening:
container-type: inline-size applies different types of 'containment' to the element, such as inline-size containment.
Size containment disables an element's ability to derive size information from its contents. This is crucial for container queries, as it prevents an endless loop where a query changes the content size, altering the query again, leading to continuous changes…
Hence, the container size must be determined by either the surrounding context (e.g., block elements auto-stretch, grid or flex items can stretch, etc.) or through explicit CSS sizing. Without these conditions, elements with size containment will collapse. Inline-block elements like buttons naturally wrap around their contents, and when combined with size containment, they collapse by default. Placing them in a flexbox or grid layout, or changing their display to block, allows them to expand according to their context.
Inline elements do not support size containment (unless they are 'atomic inlines' like images, videos, or standalone content).
Attempting to use an inline element as a container will not yield the desired results. You can still utilize a span, but you must change its display to something other than inline. Although this should appear as a non-applied style in browser devtools, clarity on this matter is necessary. Hopefully, browsers will address this discrepancy.
Hence, your code follows the specifications correctly. The requirement for containers to disregard content size is why we cannot simply design everything as a container. This foundational rule was essential for making Container Queries functional.
this response will provide you with some code-based solutions,
Be sure to refer to @MiriamSuzanne's answer for a detailed explanation of why this solution may not be functioning correctly.
https://i.sstatic.net/RzzNR.gif
to make this idea operational:
start by creating a <div> as the main container.
subsequently, enclose the desired content within, such as a button or any other element.
apply width: 100%; to all child elements so they inherit the container's width.
now enjoy using @container
like so:
.container {
container-type: inline-size;
}
.container>* {
width: 100%;
}
.container button {
background-color: lightgreen;
}
@container (width > 500px) {
.container button {
background-color: red;
}
}<div class="container">
<button>this is a button</button>
</div>https://i.sstatic.net/Yx5br.gif
demonstrating that @container behaves differently from @media
.container {
container-type: inline-size;
}
.container,
.container>* {
width: 100%;
}
.container button {
background-color: lightgreen;
}
@container (width > 400px) {
.container button {
background-color: red;
}
}<!-- 1 item -->
<div class="container">
<button>this is a button</button>
</div>
<!-- 2 items -->
<div style="display: flex">
<div class="container">
<button>this is a button</button>
</div>
<div class="container">
<button>this is a button</button>
</div>
</div>
<!-- 4 items -->
<div style="display: flex">
<div class="container">
<button>this is a button</button>
</div>
<div class="container">
<button>this is a button</button>
</div>
<div class="container">
<button>this is a button</button>
</div>
<div class="container">
<button>this is a button</button>
</div>
</div>Updating an older website that contains numerous unordered lists has presented a challenge. When the padding is set to 0, the display markers on the unordered list disappear. The root cause of this issue was traced back to the CSS setting *{padding: 0; ma ...
Is there a way to hide all content that appears after a specific element, such as a particular class of div? The issue I am facing involves using a 1&1 webpage builder with a restrictive layout-template enforced by my boss. I am trying to remove the foote ...
I'm looking to implement Bootstrap tabs in the sidebar of my website, but I'm running into an issue where the tabs aren't functioning properly within the sidebar-parsel-liste class. If I place the tab tags outside of this class, everything w ...
Displayed below is the HTML code for a page featuring three radio buttons- <html> <body> <form> <input type="radio" name="tt1" value="Insert" /> Insert<br /> <input type="radio" name="tt2" value="Update" /> Update<b ...
I'm facing an issue where I need to separate text and the money part, and also align the text in a way that when viewed in smaller text sizes, the money part moves to the next line. .outdoor-card { display:flex; flex-wrap: wrap; width: 100%; ...
I'm a beginner in the world of coding and I have a question about creating a link that reveals a hidden image while hiding itself using HTML. After some research, this is what I've come up with: <a href="javascript: ...
Looking to create a persistent floating window in a NextJS 14 app. This window needs to remain on top, even when navigating between browser windows. Want it to stay visible even when the browser window is minimized, like a Picture-In-Picture feature. Mos ...
While working on a website project, I encountered an issue with Chrome where loading a lengthy page results in a strange box covering the bottom portion of the content. Interestingly, the same pages appear fine on Safari and Firefox, indicating that the pr ...
My goal is to create a user-friendly environment where users can select options in any order and have their choices eliminated once selected. However, my current code is preventing me from executing the options out of order. Essentially, the user selects a ...
Having some trouble learning Angular and getting stuck with this Image array. Can someone please help me understand what's wrong with my code and how to fix it? FilterAndImages.html <!DOCTYPE html> <html ng-app="store"> <head> < ...
Is there a way to dynamically add a class to a dropdown menu item when a specific child element is clicked? Here's the HTML structure I have: <ul id="FirstLevel"> <li><a href="#">FirstLevel</a></li> <li>< ...
I am looking to implement phone field masking using jQuery or JavaScript. I have tried a few jQuery mask plugins, but I am still searching for a better solution. Specifically, I need three input fields for the USA (it is a requirement). The inputs needed ...
I am receiving an error even though I believe I have done everything correctly. I am currently using localhost, could that be the issue? If not, what else could it be? The error is occurring on this line: $name = $_POST['name']; Here is the co ...
As a complete beginner, I created a basic login.php. However, I am unsure how to make the login button redirect to another page. Below is the script I currently have: <php //Initiate the Session session_start(); require('connect.php'); ...
In the form I created, there is a dropdown logo selection at the bottom. The options in the dropdown are populated from folders in the root directory using the following code: $dirs = glob('*', GLOB_ONLYDIR); Each of these directories contain ...
Currently I am working on the following page: , where an embedded javascript form called infusionsoft (iframe form) needs to be made responsive at the request of my client. I'm wondering if there is a way to override the css or inject custom styles i ...
Currently working on a PHP code where a method is returning text to display an image. Here is the snippet of the code: $ret = "<div align=\"center\">" . "<image src=\"" . "${webserviceDir}Graph.php?usr_id=" . urlencode($usr_ ...
My goal is to create a loading animation using CSS transitions and animations. I have managed to achieve the initial loading effect by scaling with transition and then animating it to scale out on the x-axis. However, when attempting to transition back to ...
Would it be possible to modify a button so that instead of just clicking on it, users could also enter a secret passphrase on the keyboard to navigate to the next page in Angular? For example, typing "nextpage" would take them to the next page. If you&apo ...
Unfortunately, the tooltip does not display correctly in IE as desired. This is how it should look (in Chrome): https://i.sstatic.net/dCM9z.png However, this is how it appears incorrectly in IE: https://i.sstatic.net/Tq6rY.png Here is my CSS code for ...