As far as my understanding goes, when you apply width: fit-content; to an element, it signifies that the element's width will expand to utilize all available space, but will not shrink below the min-content size within the element. However, does the default width: auto; behave in a similar manner?
I find myself pondering about the scenarios where I should opt for using width: fit-content;...
width: auto is the default width for all elements, so the width will depend on display types (block, inline, etc.) to display respectively.
To provide a clearer understanding of width:auto, I have included 2 code snippets below
Case 1: Utilizing div with display: block as the default setting
.container {
border: 2px solid #ccc;
padding: 10px;
width: 20em;
}
.item {
width: auto;
background-color: lightblue;
padding: 5px;
margin-bottom: 1em;
}<div class="container">
<div class="item">Item</div>
<div class="item">Item with more text in it.</div>
<div class="item">Item with more text in it, hopefully it's lengthy enough for the demo</div>
</div>Case 2: Utilizing span with display: inline as the default setting
.container {
border: 2px solid #ccc;
padding: 10px;
width: 20em;
}
.item {
width: auto;
background-color: lightblue;
padding: 5px;
margin-bottom: 1em;
}<div class="container">
<span class="item">Item</span>
<span class="item">Item with more text in it.</span>
<span class="item">Item with more text in it, hopefully it's lengthy enough for the demo</span>
</div>Essentially, display: block will occupy the full width for element display, while display: inline and display: inline-block will align with the content width. The question arises: why not use display: inline or display: inline-block instead of width: fit-content?
Let's observe the following code snippet for div with width: fit-content
.container {
border: 2px solid #ccc;
padding: 10px;
width: 20em;
}
.item {
width: fit-content;
background-color: lightblue;
padding: 5px;
margin-bottom: 1em;
}<div class="container">
<div class="item">Item</div>
<div class="item">Item with more text in it.</div>
<div class="item">Item with more text in it, hopefully it's lengthy enough for the demo</div>
</div>You may notice that each line of content is displayed within an individual colored box, without encroaching upon other lines' space
In response to your query
Just wondering when should I use width: fit-content;?
Based on my personal experience, I tend to employ width: fit-content; when aiming to display tags with fitting borders
https://i.sstatic.net/U7svk.png
Source
All my tags can be exhibited on separate lines, yet the borders will conform to the content, making width: fit-content a preferred option for me.
P/s: In fact, there are alternate methods to attain this design such as utilizing a wrapper, employing flexbox, etc. Nevertheless, I lean towards width: fit-content due to its simplicity. It is worth noting that this approach may not function optimally with Internet Explorer (refer to browser compatibility here)
I am working on placing tile symbols on a grid and aiming to achieve the following: Utilize tile coordinates for symbol placement (e.g. 4,2 instead of 85,43) Define the vertices of symbols using pixel coordinates (not tile coordinates) Rotate symbols arou ...
After following a method highlighted in a forum post to set up an iframe on my webpage, I encountered some issues. To display just a section of the page within the iframe, I utilized the zoom/scale feature available in different browsers. To target a spec ...
I am in the process of creating a website dedicated to my "Starcraft II" clan. My goal is to have the navigation bar display the text "ALLOYE" and remain fixed at the bottom of the screen. I attempted to achieve this using the following code: vertical-alig ...
Here is the HTML code that I am working with: if(isset($_POST['itemid'])) { <table class="table table-striped table-condensed table-bordered table-rounded errorcattable"> <thead> <tr> <th colspan='4'> ...
When dealing with repetitive function calls using the same element as a parameter, is it more effective to store the element as a global variable? For instance, imagine a function that is triggered on every key press and takes an element as an argument. ...
Looking to insert a prepend element between two input elements without relying on extra CSS tricks. Is it possible to achieve this using just Bootstrap and without any additional CSS? <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bo ...
I am attempting to develop a straightforward collapsible div using styled-components within a react project. While I have successfully managed to toggle the div's open and close state based on certain conditions, I am facing difficulties in implement ...
Over at ollynural.github.io, I've been working on creating a pop-up div in the portfolio page that provides additional information about the project you select. To close the pop-up, I have implemented an ng-click feature so that clicking on the main p ...
I am attempting to retrieve information from a PHP file and insert HTML code into the <div id="1"..., but there are no errors showing and nothing is being inserted into the div. Could the issue be with the AJAX code or is it a problem within the HTML st ...
Despite trying all three methods, I keep getting an error regarding cross domain access denied. Previously, I had successfully used YQL in different parts of my applications, but now it seems to have stopped working as well. JSFIDDLE <script> $(fun ...
I recently acquired a classic bootstrap template that is structured like this: <div class="container"> <div class="row"> <div class="col-12"> ...header... <div class="carouselContainer"> ...carousel... ...
I've found myself in a frustrating situation where I have an unordered list structured like this: var liList = $("#first").find("li"); var append = ""; for(var i =0; i< liList.length; i++){ var item = $(liList); append += "<option value ...
Using Javascript in the code below, I am retrieving the absolute XPath of a web element: public String getAbsoluteXPath(WebDriver driver) { return (String) driver.executeScript( "function absoluteXPath(element) {"+ "va ...
Code snippet: http://jsfiddle.net/R3G2K/1/ In my project, there are multiple divs with content and each div has a header. My goal is to make the last header that goes out of viewport "sticky" or fixed at the top. I have explored various solutions for thi ...
I'm attempting to implement an accordion feature for each row of an HTML table using the script provided below HTML <table class="list" id="table" data-bind="visible: !loading()"> @*<table class="productTable" data-bind="sortTable:true" ...
I'm in the process of creating a website using Next and Typescript, with some interesting packages incorporated: Framer-motion for smooth page transitions Gsap for easy animations One issue I encountered was when setting images like this: <Link&g ...
I'm currently working on a sailing website, and I've run into an issue with the left and right controls and indicators in the testimonials section. They don't seem to be responding properly. Could this be due to me not including or calling t ...
I am currently working on a modal that contains a significant amount of text. My main goal is to limit the height of the modal to the size of the window, while also adding a scrollbar to the content area positioned above the OK button. Check out the Plunk ...
In my table, there are two large cells. The left cell contains two drop-downs and a JQuery UI button that is causing trouble, while the right cell displays a list generated from an AJAX database query. As the list grows longer, the button gradually moves u ...
My current challenge involves a small table structured as a bullet list with two columns. To enhance mobile display, I am seeking a way to collapse it down to a single column: https://i.sstatic.net/LqbA6.png The current implementation includes the follow ...