What is the best way to ensure that the parent div adjusts its width to match the width of its child elements using

I am currently facing an issue with a flex parent div that does not adjust its width to fit the child elements within. How can I resolve this?

Essentially, I need to create a dynamic two-dimensional matrix where the user sets the dimensions, resulting in varying amounts of elements and line breaks as shown in the following code snippet. The child elements have fixed width and height.

.parent {
  display: flex;
  flex-wrap: wrap;
  background-color: silver;
  padding: 5px;
  border-radius: 10px;
}

.child {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: gold;
  margin: 5px;
}

.line-break {
  width: 100%;
}
<div class='parent'>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='line-break'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</div>

Here is a link to the fiddle showcasing the code: https://jsfiddle.net/NoisyApple/4g8n3vfL/3/

I anticipate the parent div automatically adjusting its width based on the elements it contains.

htmlcssflexbox

Answer №1

To achieve this layout, you can utilize a straightforward inline-block setup:

.container {
  display:inline-block;
  background-color: silver;
  padding: 5px;  
  border-radius: 10px;
  font-size:0; /*to eliminate whitespace:*/
  margin:5px;
}

.item {
  height: 40px;
  width:40px;
  display:inline-block;
  vertical-align:top;
  border-radius: 10px;
  margin:5px;
  background-color: gold;
  font-size:initial;
}

.break-line {
  display:block;
}
<div class='container'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='break-line'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>
<br>
<div class='container'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='break-line'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

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

Enable vertical scrolling within the table body to display entire rows

Encountering an issue with using overflow-y inside tbody. Attempting to set the maximum height of the tbody results in it shrinking into a single column, as shown in image 1. Seeking assistance in resolving this problem. Thank you. Below is the HTML code: ...

htmlcssoverflowbootstrap-5

How can I modify the appearance and behavior of an HTML button?

I simply need to update the button class and value in order to change the button's functionality. After successfully changing the value and class, the functionality remains the same as the old class. Why is this happening? Could it be that the brows ...

phpjqueryajaxhtml

Creating a Jquery method to handle multi-line ellipsis for long text

Check out this fiddle I made: http://jsfiddle.net/mupersan82/JYuSY/ This snippet handles multiline ellipsis: $(function() { var ellipsisText = $('.multilineEllipseText'); var textContainer = $('.incidentCellBottomRight').height(); whi ...

jqueryhtmlcss

Looking to create a responsive image in a liquid file on Shopify

Recently, I added a new feature to my Shopify backend where users can upload images to a page. While I can see the images on the front-end, they are currently aligned to the right. My goal is to make these images responsive by default and expand to fit the ...

htmlcssjsonshopifyliquid

Aligning content in the footer vertically

After receiving help previously, I found my work to be extremely disorganized, making it difficult for me to follow someone else's progress. Currently, I have managed to align my content vertically, but now my footer is being cut off halfway and my so ...

htmlcssalignmentvertical-alignment

Preserving the HTML format of a string stored in MongoDB: Best practices

Currently, I am utilizing AngularJS for my frontend and mongodb for backend database management. For post editing, I rely on textAngular. When creating a new post, such as a service agreement, textAngular automatically adds formatting using HTML tags. &l ...

htmlangularjsmongodbformat

Issue with Bootstrap: Navbar elements shifting when page width is decreased

I am facing an issue with my two navbars, one above the other. The top bar is thinner and consists of two navigation items aligned to the right of the page. Despite setting it not to collapse when the page width is reduced, the items suddenly disappear whe ...

htmlcsstwitter-bootstrapbootstrap-4

Harnessing the power of Bootstrap 4: Adding text and icons to your <progress> bars

I'm attempting to add an icon overlay on a progress bar within Bootstrap 4 alpha. <progress class="progress progress-primary" value="100" max="100"> <i class="fa fa-check-circle-o"></i> </progress> The desired outcome shoul ...

csstwitter-bootstraptwitter-bootstrap-4

Collapsed items within a Bootstrap accordion using th:block

Hello, I am having trouble with displaying objects on my website. I have received some data from the database and I would like to display it in an Accordion collapse format (similar to Bootstrap's example). Currently, all the objects are opening up on ...

javahtmlbootstrap-4thymeleaf

Are the form fields and database table fields sharing identical names?

Do you think it is a poor practice to use the same name for HTML form fields as for table field names? I'm creating dynamic SQL insert queries and currently, I am using regular expressions to change the names to match the corresponding database fields ...

phpmysqlhtmldatabaseforms

Prevent cross-site scripting vulnerabilities by replacing the characters "'<'" and "'>'"

Is it possible to protect my website from XSS attacks by simply replacing < and > with &lt; and &gt;, or is there more to consider? For example: <?php echo '<div>' . $escaped . '</div>' ?> I am alread ...

htmlsecurityxss

Incorporating specific item into a table using PHP

On my page, I have 3 select forms and an addToCart button. The select forms are populated with data from the database to display products without any issue. However, when a user clicks on the addToCart button, I need to capture the selected values from t ...

phphtml

Setting Up Background Colors in Angular 4

I'm attempting to create a background color that fills the entire page. I've set it in the body tag, but when I add background-color: blue, it doesn't cover the whole background as intended. Instead, it only fills the background of the eleme ...

htmlcssangular

I have been working on creating a horizontal menu, but encountered an issue where the nav tag is unable to accommodate all the ul lists within itself

My latest project involves a menu with three separate divs: logo, nav-bar, and right-bar. I decided to use justify-content: space-around to position the elements - the logo on the left, navigation in the center, and right-bar on the right. However, when I ...

htmlcss

Create an HTML form that allows users to select from an array of options using PHP

Is it possible to assign a PHP array as the value of an HTML <option> tag? For example: <select name='myname'> <option value='array("font-family" => "font-family: 'Yeseva One', serif","font-name" => "Yeseva ...

phphtmlarraysformsselect

Maintain a consistent header height with CSS even when using the calc() function

--dis: calc(var(--max-height) - var(--min-height)); /* @media large{--min-height:13rem}; @media small{--min-height:6.5rem}; --max-height:75vh; */ --percent: calc(var(--scroll-ani) / var(--dis)); /* in js: document.body.style = "--scroll-ani: ...

javascripthtmlcss

Checkbox selection problem caused by repeated clicking

What I accomplished 1. Generated an array of checkboxes with unique numeric ID 2. Utilized jQuery to toggle checkbox status on click of <td>(also with unique numeric ID) 3. Implemented check-uncheck logic using jQuery. Issue : Initially, ...

javascriptphpjqueryhtmlcheckbox

I would greatly appreciate your assistance in grasping the CSS code provided

Although I wouldn't consider myself a CSS expert, I usually can figure out how to manipulate code to achieve my desired result. However, the CSS code snippet below has me puzzled and I haven't been able to find any resources to help me make sens ...

htmlcss

To prevent flickering when using child flex elements, it's best to use position fixed along with a dynamically updated scrollbar position using Javascript

My navigation component includes a slim banner that should hide upon scroll and a main-nav bar that should stick to the top of the screen and shrink when it does so. I initially looked into using Intersection Observer based on a popular answer found here: ...

javascripthtmlcssscroll

I'm facing a problem with the margin and display setup in my assignment

I am encountering a bit of confusion regarding the margin when implementing the following code: Section { background-color: #FFFFFF; width="100%"; } p1 { font-family: Roboto; font-size: 22px; font-height: 1px; margin-top: 45px; margin-lef ...

htmlcss