elements that do not adhere to set width constraints

I've successfully arranged elements in my HTML using flexbox to achieve a responsive design for a website. However, I've encountered an issue where the elements do not resize properly.

After applying a class of flex to the home-promos div and rearranging the elements at a breakpoint, everything seems to be working fine.

The problem arises when I attempt to resize the divs to percentages widths. They only scale up to a certain point, like 50%, and then refuse to go any larger.

If there's anyone proficient with flexbox who can shed some light on what might be causing this issue, please let me know!

.home-promos {
  display: flex;
}
.home-promo-center {
  order: 1;
}
.home-promo-left {
  order: 2;
}
.home-promo-right {
  order: 3;
}
<div class="home-promos">
  <div class="home-promo-left">
    <div class="promo-left-content">
      *content*
    </div>
  </div>
  <div class="home-promo-center">
    <div class="promo-center-content">
      *content*
    </div>
  </div>
  <div class="home-promo-right">
    <div class="promo-right-content">
      *content*
    </div>
  </div>
</div>

htmlcssflexbox

Answer №1

Upon creating a flex container by using either display: flex or display: inline-flex, it automatically comes with a set of default configurations. These include:

  • flex-direction: row - causing flex items to align in a horizontal manner
  • justify-content: flex-start - prompting flex items to stack at the beginning of the line
  • flex-wrap: nowrap - enforcing flex items to remain on a single line
  • flex-shrink: 1 - allowing flex items to shrink if needed

Pay attention to the last two settings.

The three divs are constrained to staying on one single line, limiting their combined width to that of the container.

Furthermore, they have the ability to shrink, preventing them from overflowing the container and also restricting their width.

To assign specific widths to each flex item, you can override these initial settings with:

  1. flex-wrap: wrap - providing more room as flex items can now break onto new lines
  2. flex-shrink: 0 - allowing for more space as flex items will not shrink and can overflow their container if necessary

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

Issue with Angular controller failing to load when link is clicked

I am currently developing a webpage that incorporates Angular and responds to ajax requests by populating data into a table. When I manually enter the address, everything works as expected. However, if I navigate to the page using a link ( <a href="/pro ...

javascriptjqueryhtmlangularjsajax

Loading message displayed in web browsers by banner rotation system

I'm currently working on a banner rotator function that seems to be showing a "loading" message continuously while running. Here is the code snippet for reference: var banners = ['../Graphics/adv/1.gif','../Graphics/adv/2.jpg']; / ...

javascripthtmlcssbrowser

Convert a two-column layout on the web into a single-column layout for mobile devices, featuring dynamic

Is there a way to style this diagram with CSS that will work on IE11 and all major browsers? It seems like Flexbox doesn't support dynamic height. Do I need separate left and right columns for larger viewports and no columns for smaller viewports? ...

javascripthtmlcssgridflexbox

What steps can I take to expand this on a grander level?

I have a code snippet for a personality quiz, but I'm facing an issue with increasing its size. Here's the HTML code: <h3>1. What is your favorite color?</h3> <input type="radio" name="q1" value="A" /> A. Red. <input type="r ...

javascriptjqueryhtml

Looking to execute a PHP script upon form submission

I have a form that I need to submit in order for a PHP script to run using AJAX. <form method="post" action="index.php" id="entryform" name="entryform"> <input type="submit" name="submit" value="Submit" onclick="JavaScript:xmlhttpPost('/web/ ...

phpjavascripthtmlajaxforms

What is the importance of including the source name when redirecting?

In a recent discussion (jQuery Ajax PHP redirecting to another page), it was mentioned that when utilizing ajax for redirection to a PHP page, an event needs to be set in the following manner: $.ajax({ type: "POST", url: "ajax.php", data: dataString, ...

phpjqueryhtmlajaxhttp-redirect

Achieve a full page layout with content and attach the footer to the bottom using flexbox in Tailwindcss and Nextjs

How can I use flex-grow to make the body section fill the screen and keep the nav fixed at the bottom? I'm having trouble figuring out which elements to apply these properties to. Can anyone provide guidance on which element should have these styles? ...

javascriptcssreactjsnext.jstailwind-css

Guide on retrieving the button value within a foreach loop by utilizing the post method

Aim: Retrieve the values of buttons using the $_POST method within a foreach loop $projects= 'Project1, Project2, Project3'//from MySQL database $projectNames = explode(',', $projects); // separating project names to display individua ...

phphtmlbuttonforeachformshttp-post

Can you reveal a table with the click of a button?

Hi there! I'm a newcomer to the world of Ruby on Rails and I’m currently working on creating a page that includes a date field. Once a specific date is selected, I’d like to generate a table displaying reports from that chosen date. controllers/r ...

htmlruby-on-railsmodel-view-controllerruby-on-rails-5

Tips for making a fluid DIV expand to fit the entire width of the page

My layout features fixed-width sidebars on the left and right, with a fluid main content area that fills the space in between using float:left. Here's an example: #left-sidebar {width: 200px;} #right-sidebar {width: 300px;} #main-content {margin-left ...

htmlcsslayout

Customizing the DatePicker with a unique button in material-ui

For my current project, I am utilizing a Datepicker component. I am looking to incorporate a custom information button in the upper right corner of the calendar layout, similar to the example image provided below: https://i.stack.imgur.com/fHMbn.png Unfo ...

javascripthtmlcssreactjsmaterial-ui

Update a div in PHP using the data received from an AJAX response

I recently developed a PHP application and encountered an issue with updating the value of a date picker. The user is prompted for confirmation when changing the date, and upon confirmation, the date in the "expiry" field (with id expiry) should update alo ...

javascriptphpjqueryhtmlajax

The div element is failing to occupy the entire page

I have encountered an issue where I created two small blocks, but they do not start from the screen edges. Instead, they take up space from the left, right, and top as well. Here is my code: HTML <body> <div id="header"></div> & ...

htmlcss

What could be the reason for the CSS file not getting applied to the HTML in my project?

Having trouble applying an external CSS file to my HTML file. Currently working on a Cloud IDE (goormIDE, similar to C9) and trying to link an external CSS file to my HTML file on the web server using Node.js. However, the CSS file is not being applied to ...

htmlcssnode.js

Utilizing DOMStringMap data to populate CSS URLs

I am attempting to create a universal CSS modification for a webpage element that resembles: <button data-action="link" class="cardImageContainer coveredImage cardContent itemAction lazy lazy-image-fadein-fast" data-blurhash="lo ...

javascripthtmlcssdomjellyfin

What is the best way to add the current date to a database?

code: <?php session_start(); if(isset($_POST['enq'])) { extract($_POST); $query = mysqli_query($link, "SELECT * FROM enquires2 WHERE email = '".$email. "'"); if(mysqli_num_rows($query) > 0) { echo '<script&g ...

javascriptphpjqueryhtmlcss

How can I show the last li item in a ul element that extends beyond its parent container?

Chat App Development In my current project, I am developing a chat application using React. The app consists of a list (ul element) that displays messages through individual items (li elements). However, I have encountered an issue where the ul element st ...

javascripthtmlcssreactjs

Create a PDF document using the combined HTML content

I am facing an issue with generating a PDF from HTML content. My goal is to convert all the content within a specific div into a PDF. I have tested out a few converters, but they only seem to convert HTML files. I do not want to convert the entire HTML fi ...

phpjavascripthtmlpdf

Experiencing an error while trying to implement a node.js server-side service through AngularJS. Encountering the error message: "Error: [$injector:nomod] Module ‘angularjsNode

An error has occurred: Error: [$injector:modulerr] Failed to instantiate module angularjsNodejsTutorial due to: Error: [$injector:nomod] Module ‘angularjsNodejsTutorial’ is not available! You either misspelled the module name or forgot to load it. If r ...

htmlangularjsnode.js

Scroll bars on JQuery UI dialog

When using the jquery UI Dialog modal, everything appears correctly in Firefox and Chrome. However, in IE8, scroll bars suddenly appear. Is there a way to remove them? ...

htmlcssjquery-uidialog