How to ensure HTML elements are styled to occupy the full width of their parent container while respecting the minimum width requirement

Is there a way to make HTML elements have a width ranging from 150px to 200px while filling up 100% of their parent's width?

Check out Image 1:

https://i.sstatic.net/nYNGp.jpg

And here is Image 2 (after resizing the window):

https://i.sstatic.net/h0rsY.jpg

Now, take a look at Image 3 (resizing a bit more):

https://i.sstatic.net/LzOAa.jpg

Lastly, we have Image 4 (even more resizing):

https://i.sstatic.net/fTnwU.jpg

I attempted using flexbox, but the items are not fully occupying the 100% width:

(Kindly view the sinppet in full screen)

.flex {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  background: #ff0000;
}
.flexitem {
  display: -webkit-flex;
  display: flex;
  margin: 5px;
  min-width: 150px;
  max-width: 200px;
  background: #000000;
  border: 1px solid #ffffff;
}
<div class="flex">
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>

</div>

htmlcssflexbox

Answer №1

The key modification involves permitting the use of flex-grow and flex-shrink alongside min- and max-width attributes. All elements now have a width ranging from 150 to 200px. However, the final line does not fully extend to fill its parent container due to these specific widths. Additionally, I removed display:flex from the child elements as it serves no purpose since they do not contain any children. To ensure that the border is included within the maximum width of 200px, I also added box-sizing: border-box;:

.flex {
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
  background:#ff0000;
}

.flexitem {
  flex-grow: 1;
  flex-shrink: 1;
  box-sizing: border-box;
  margin: 5px;
  min-width:150px;
  max-width:200px;
  background:#000000;
  border:1px solid #ffffff;   
}
<div class="flex">
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  
</div>

Answer №2

To adjust your code, simply include flex: 1 1 150px, and all the flexitems will be sized between 150px and 200px.

It must be noted that achieving a full-width fill for the last row while wrapping is not feasible if each flexitem has a size constraint of 150px to 200px.

Explanation behind its functionality:

  1. The shorthand setting flex: 1 1 150px implies:

    a. Allowing flex-grow by setting it to 1

    b. Permitting flex-shrink by also setting it to 1

    c. Setting the initial size (flex-basis) to the required minimum width

  2. Combining the flex property with min-width and max-width ensures the flexitems span between 150px and 200px.

    However, please beware: Certain rare cases exhibit inconsistent behavior, especially when using both min/max values alongside flex properties - refer to this reference for more details.

  3. Furthermore, incorporating border-box (explained here) and eliminating margins from the body finalizes the setup.

Thank you!

body{
  margin: 0;
}
*{
  box-sizing: border-box;
}

.flex {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  background: #ff0000;
}
.flexitem {
  display: -webkit-flex;
  display: flex;
  margin: 5px;
  flex: 1 1 150px;
  min-width: 150px;
  max-width: 200px;
  background: #000000;
  border: 1px solid #ffffff;
}
<div class="flex">
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</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

Trouble loading antd's less styles

In my NextJs project, I have the following file structure: -pages -_app.tsx -app -styles -antdstyles.less Within _app.tsx, I am attempting to import @styles/andstyles.less, which simply imports antd styles like this: @import '~antd/di ...

cssreactjsnext.jslessantd

I am puzzled by the fact that the center cell of my table is longer than the surrounding cells

I'm currently working on a project that involves creating a webpage. I have a table, and when I execute the code, I notice that the center cell appears longer than the rest of the cells. table,td,tr{border: 1px solid red; } <!document html> ...

htmlcss

What is the method for saving background color and font size preferences in local storage using HTML?

I want to give visitors to my site the option to customize the background color and text size. Can their preferences be saved in local storage? If so, could you share some HTML code to make this possible? ...

phphtml

Struggling to create a flawless gradient fade transition

Looking to create a gradient overlay on my images for a specific effect: The goal is to have the gradient darker at the bottom, while leaving the top unaffected by the darkness. I attempted the following code: @include linear-gradient(to top, rgba(0,0,0 ...

csslinear-gradients

Is your CSS file functioning properly in Chrome but not in Internet Explorer?

I recently developed a custom SAP Portal Component that includes a JSP file with Javascript. This component is placed on a SAP Portal page alongside another iView, which contains multiple headers and text within an iframe. My objective is to dynamically ge ...

javascriptjqueryhtmlcss

Tips for aligning pagination block at the center using react-bootstrap

Currently, I have implemented a custom pagination system for a small web application that I am developing using react-bootstrap. I have successfully integrated and set up the pagination functionality. As someone who is still new to react and bootstrap, wit ...

htmlreactjspaginationreact-bootstrap

Getting the ID name from a select tag with JavaScript - A quick guide!

Can you help me retrieve the id name using JavaScript when a selection is made in a select tag? I have tried running this code, but it only alerts undefined. For instance, if I select bbb in the select tag, I should be alerted with 2 Any suggestions on ...

javascripthtml

Tap on the screen to initiate a phone call using dompdf

I recently came across a recommendation to include the following code snippet to enable click-to-call functionality: <a href="tel:555-555-5555">555-555-5555</a> However, I encountered an issue when trying to implement this in dompdf. ...

phphtmlcodeigniterdompdf

Retrieve and modify the various elements belonging to a specific category

I'm currently developing a chrome extension and I need to access all elements of this specific type: https://i.stack.imgur.com/sDZSI.png I attempted the following but was unable to modify the CSS properties of these elements: const nodeList = documen ...

javascriptcssgoogle-chromegoogle-chrome-extension

What measures can be taken to safeguard my web app from unauthorized devices attempting to connect?

I am looking for a way to restrict access to a webapp so that only authorized users can connect from approved computers or mobile devices. If a user enters the correct username and password, access will be granted only if they are using a device approved b ...

javascriptasp.nethtmlvb.net

Is that possible to prevent the use of the & symbol in Angular 4 HTTP requests?

Using an HTTP request to save data in my database. The code snippet I used is: const form = '&inputdata=' + myinput + '&rf_date=' + rf_date; return this.http.post(this.rootUrl, form, {headers : this.reqHeader}); In thi ...

htmlangulartypescript

What could be causing my title (titulo) to be misaligned? Why aren't justify and align functions fixing the issue?

My attempt to center my title "Scream" is not working as expected. Here is how it looks: Visit this link for visualization. I have tried using justify, align, and text-align properties in my CSS code but the title (titulo) remains misaligned. Surprisingly ...

htmlcssresponsive-design

Is the code generated by Webflow.com functional and practical?

Recently, I have discovered the wonders of www.webflow.com for creating an admin layout. It excels in generating a flexbox layout based on my PSD design without requiring me to manually code with Gulp. My plan is to further simplify the process by breaki ...

htmlcssflexbox

AngularJS: How can I eliminate the #! from a URL?

Looking for guidance on how to remove #! from the URL in AngularJS using ng-route. Can anyone provide a step-by-step process on removing #!? Below is the code snippet: index.html <head> <script src="https://ajax.googleapis.com/ajax/libs/ang ...

htmlangularjs

Using DataTable with backend processing

Has anyone successfully implemented pagination in DataTable to dynamically generate the lengthMenu (Showing 1 to 10 of 57 entries) and only load data when the next page is clicked? I'm currently facing this challenge and would appreciate some guidance ...

javascriptjqueryhtmljsondatatables

Can you modify a WordPress/WooCommerce title written in uppercase to display in proper capitalization?

My current project is centered around WordPress and utilizes WooCommerce as its e-commerce platform. I recently migrated products from an old site where the product titles were written in uppercase. At the moment, my HTML code for the product titles looks ...

phpcsssqlwordpresswoocommerce

Unable to assign a height of 100% to the tr element or a width of 100% to the

While inspecting the elements, I noticed the presence of <tbody>, within which <tr> is nested. The issue arises when the tbody element has 100% height and width as intended, but <tr> always falls short by 4 pixels in height even when styl ...

htmlcss

How can you correctly include a link to a plain text sitemap file in an HTML document?

Could this code effectively inform Google to index my sitemap (or acknowledge its presence)? <link rel="sitemap" href="./sitemap.txt" type="text/plain" title="Sitemap" /> Google's guidelines allow plain t ...

htmlseometa-tagssitemapgoogle-search

Top tips for optimizing HTML and utilizing div elements

Could you please provide some insights on how to effectively utilize HTML5 in conjunction with div tags? Below is the snippet of my HTML code. I am incorporating the article tag and have segmented sections, which seem to be in order. However, I am also ...

csshtml

The functionality of the onclick button input is not functioning properly in the Google

Here is some JavaScript code: function doClick() { alert("clicked"); } Now, take a look at this HTML code: <div > <table border="2" cellspacing="0" cellpadding="0" class="TextFG" style="font-family:Arial; font-size:10pt;"> <tr> <t ...

javascripthtmlgoogle-chrome