What could be the reason for the malfunction of my flexbox layout?

I need to create a layout with three divs in a row. The first div should have a fixed width, the second div should expand until it reaches a "max-width", and the third div should take up the remaining space. Everything works fine until the text inside the third div fills up the entire width. Instead of wrapping, the text causes the second div to shrink.

<div id="container">
    <div id="one">
    sdfsdf
    </div>
    <div id="two">
    fghfgh fghfghd sdf sdf sdf ssdf sdf gh
    </div>
    <div id="three">
    sdfsdfsdfsdfsfd sdf sdf sdf sdf sdfwef sdfwefs df 
    </div>
</div>

#container{
  background-color: red;
  display: flex;
  height: 100px;
  width: 400px;
}

#one{
  background-color: blue;
  flex-grow: 1;
  width:60px;
}
#two{
   background-color: red;
   max-width: 100px
}
#three{
   background-color: green;
   flex-grow: 1;
}

For more information and a demonstration, you can visit the jsfiddle here.

Answer №1

Below is an example of how you can utilize CSS flexbox:

#wrapper {
  background-color: yellow;
  display: flex;
  height: 200px;
  width: 600px;
}

#item-1 {
  background-color: purple;
  width: 100px;
}

#item-2 {
  background-color: orange;
  max-width: 150px;
}

#item-3 {
  background-color: pink;
  flex: 1;
}

To make a div expand to fill the remaining space using flexbox, set its style to flex: 1 while explicitly defining widths for the other divs. This ensures that each div takes up their designated space accordingly.

Answer №2

If you want to adjust the size of the third div, consider using the CSS property flex-grow: 1:

#container {
  display: flex;
  height: 100px;
  width: 400px;
}

#one,
#two,
#three {
  flex-grow: 1;
}

#one {
  background-color: blue;
}

#container,
#two {
  background-color: red;
}

#three {
  background-color: green;
}

Answer №3

  1. Ensure that the #one division has a flex-shrink value of 0 with no flex-grow.
  2. The #two division should have a flex-shrink value of 0 and flex-grow set to 1.
  3. #three must not have any shrink or grow properties applied.

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

HTML and CSS - Aligning text and managing scrollbar visibility

I am currently diving into the world of coding and embarking on the journey of crafting a website for my father. This project not only helps me gain valuable experience but also builds up my portfolio. Utilizing unsemantic and normalize frameworks, I enco ...

The date selection tool is failing to appear on the screen

I successfully created a date picker using Bootstrap. Here is the code: <div class="form-group"> <div class='input-group date' id='datetimepicker1'> <input type='text' class="form-control" /> <s ...

Expanding the navbar with Bootstrap 3.0 by using the navbar-brand class

I'm facing an issue with the navbar-brand while adding my logo. I am using the latest version of bootstrap CSS from getbootstrap.com, and the problem is also evident there: The navbar becomes slightly oversized when the logo is included. However, if I ...

What is the reason behind the removal of <section> tags by the html5lib sanitizer?

I'm currently grappling with this issue. It's interesting to note that within the sanitizer code of html5lib, <section> is not considered an acceptable element. Why is that so? Upon investigation, it seems that the primary reason for this ...

Changing the Input Label Color on Hover in Material-UI TextField

I have a custom styled Mui TextField called CustomTextField. It changes the input background color and font color on hover, but I also want to change the label font color when hovered over. Currently, the input background changes from black to white on hov ...

Should you prioritize internationalizing your image alt attributes?

Do you localize your alt attribute in img tags for internationalization? Is it beneficial in the long run? ...

Disabling transparency for divs and subsequently restoring it

Currently, I am in the process of developing a website dedicated to my hometown using Wordpress. To enhance the viewing experience for users, I adjusted the transparency of the main div so that they can fully appreciate the background image. While this mod ...

I am experiencing issues with md-no-focus-style not functioning correctly in my configuration

I have a button that triggers the opening of my navigation bar: https://i.sstatic.net/nMr0i.jpg When I click on it, a hitmarker appears: https://i.sstatic.net/OLQaE.jpg The issue is that even after clicking on a navigation item and transitioning to the ...

How can I retrieve information from a MySQL Table and display it on an HTML page?

Seeking Solution, I've experimented with Node.JS, but unfortunately, it does not seem suitable for webpage functionality. Online resources mostly discuss displaying HTML through Node.JS without mentioning SQL integration. My experience with PHP is l ...

Having trouble with your website div not appearing correctly on Firefox?

I'm facing an issue with the display of a website (found here). The elements inside the div with the class name of .index_container are not appearing correctly in Firefox. Despite being present, they remain invisible. I've attempted to resolve th ...

Establish a vertical column that matches the height of its parent element

Is there a way to create a column that matches the height of its parent element? I have a navbar followed by a container with three columns. The challenge is to make the last right column the same height as its parent and also scrollable. In this scenario, ...

Strange circle border appearance in Android / Chrome device

Having an issue with my code on a Samsung Galaxy S5 in Chrome 54.0.2840.85, Android 6.01. You can view the problematic codepen here: http://codepen.io/johnsonjpj/pen/jVpreB The border displays correctly on Firefox and iPhones, but not on my device. Trou ...

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 ...

Sending chosen choice to controller method

I'm working with a table that contains inputs and angular models. <td> <select class="form-control" id=""> <option ng-model="mfrNo" ng-repe ...

Hover image displacement

Can anyone help me identify the feature used in this price list where the mouseover changes and a big image appears underneath? I'm trying to achieve something similar but can't figure out how. Any guidance would be appreciated. ...

Assigning an incorrect action to a form element

In the Kohana 3.2 documentation, there is a validation example located in the ORM directory that I would like to discuss further: <form action="<?= URL::site(**'/members'**); ?>" method="post" accept-charset="utf-8"> <label for="u ...

Using addClass and removeClass functions in JQuery when selecting a radio button

I am facing an issue with my radio buttons being displayed as images. When a picture (radio button) is selected, I want the other pictures to become hidden. To achieve this, I plan to add a class to the checked picture and then add another class to the unc ...

Generating dynamic divs using jQuery

Could someone please shed some light on why my code isn't working as expected? for(var i=0; i<4; i++) { var ref = i+1; $("#test").append("<div id='t" + ref + "'>In t" + ref + "</div>"); } The goal he ...

Accessing controller in Angular directly from the HTML without using $scope

Currently, I am working with the latest version of Angular and have been advised to eliminate the use of the $scope object. As a result, when referencing my controller from the HTML page, I now use an alias: <div ng-controller="MyController as ctrl"&g ...

Best practice for showcasing an MVC Form with the use of Bootstrap

I am facing an issue with my form layout while trying to capture user input. The use of Bootstrap is creating two columns for text boxes and their labels, but the alignment goes off track with the last EditorFor element. I'm questioning if I am misusi ...