My DIV elements are not responding to the widths I set for them. What could be the issue?

Recently, I've been delving into the world of Flex to experiment with some unique layouts.

However, I encountered an issue where my divs were not recognizing widths as expected.

I attempted to set the first div of each row to 5% width so they would align neatly on the left side

Even after trying both 5% and 5vw widths, nothing seemed to change.

I plan to organize them into classes eventually, but for now, my priority is to get them working correctly.

The parent div also has a width of 100%, providing a helpful reference point.

This is My HTML:

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">
  <style type="text/css">
    /* Grid styles */
    
    .column {
      /*flex-basis: 100%;*/
    }
    
    @media screen and (min-width: 800px) {
      .row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
      }
      .column {
        flex: 1;
      }
      ._25 {
        flex: 2.5;
      }
      ._5 {
        flex: 5;
      }
    }
    /**
    {
      border: 1px dashed red;
    }*/
  </style>
</head>

<body>
  <!-- Personal user row -->
  <div class="row" style="height: 30vh; border-bottom: 1px solid black; width: 100%;">
    <div class="column" style="background-color: pink; width: 5%; display: flex; justify-content: center; align-items: center;">
      <span style="font-size: 18pt" class="fa fa-user">&nbsp;</span>
    </div>
    <div class="column" style="background-color: red; justify-content: center; align-items: center; padding-top: 1em;">
      <div>&nbsp;</div>
    </div>
  </div>

  <!-- User info/Settings row -->
  <div class="row" style="height: 30vh; border-bottom: 1px solid black; width: 100%;">
    <div class="column" style="background-color: purple; width: 5%; display: flex; justify-content: center; align-items: center;">
      <span style="font-size: 18pt" class="fa fa-cog">&nbsp;</span>
    </div>
    <div class="column" style="background-color: red; padding-top: 1em;">&nbsp;</div>
    <div class="column" style="background-color: red; padding-top: 1em;">&nbsp;</div>
  </div>

  <!-- Messages/Chat row -->
  <div class="row" style="height: 25vh; width: 100%;">
    <div class="column" style="background-color: salmon; width: 5%; display: flex; justify-content: center; align-items: center;">
      <span style="font-size: 18pt" class="fa fa-comment">&nbsp;</span>
    </div>
    <div class="column" style="background-color: red; padding-top: 1em;">
      <div>&nbsp;</div>
      <div>&nbsp;</div>
    </div>
  </div>
  <!-- End Main Body Area -->
</body>

</html>

htmlcssflexbox

Answer №1

When using flexbox, don't just rely on setting widths for columns.

The width of columns can be automatically divided proportionally, but you can override this by using the flex property, such as flex: 0 0 5%;

This is how the flex shorthand property works:

flex: <flex-grow> <flex-shrink> <flex-basis>;

In simple terms, the shorthand combines flex-grow, flex-shrink, and flex-basis together.

Remember, the flex property syntax allows for values like 

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

Answer №2

Take a look at the example below, which adjusts the width of the columns by setting flex: 0 0 5%; instead of width: 5%.

@media screen and (min-width: 800px) {
  .row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    border-bottom: 1px solid black;
    width: 100%;
  }
  .column {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .h-30vh {
    height: 30vh;
  }
  .w-5per {
    -ms-flex: 0 0 5%;
    flex: 0 0 5%;
    max-width: 5%;
    justify-content: center;
    align-content: center;
  }
  .bg-pink {
    background-color: pink;
  }
  .bg-purple {
    background-color: purple;
  }
  .bg-red {
    background-color: red;
  }
  .bg-salmon {
    background-color: salmon;
  }
  .column span {
    font-size: 18pt;
    display: flex;
  }
  .d-flex {
    display: flex;
  }
  .pt-1em {
    padding-top: 1em;
  }
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="row h-30vh">
  <div class="column bg-pink w-5per">
    <span class="fa fa-user">&nbsp;</span>
  </div>
  <div class="column bg-red">
    <div>&nbsp;</div>
  </div>
</div>

<!-- User info/Settings row -->
<div class="row h-30vh">
  <div class="column bg-purple w-5per">
    <span class="fa fa-cog">&nbsp;</span>
  </div>
  <div class="column bg-red d-flex">&nbsp;</div>
  <div class="column bg-red d-flex">&nbsp;</div>
</div>

<!-- Messages/Chat row -->
<div class="row h-25vh bg-salmon">
  <div class="column w-5per">
    <span class="fa fa-comment">&nbsp;</span>
  </div>
  <div class="column bg-red pt-1em">
    <div>&nbsp;</div>
    <div>&nbsp;</div>
  </div>
</div>

Answer №3

Instead of using width, consider setting a max-width or min-width instead

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

What is the best way to display HTML content from a stored object?

In my project using Next.js, I am faced with the challenge of rendering custom landing pages based on their unique URLs. While I have successfully retrieved all the necessary details from the database for each specific URL, there is a particular object con ...

htmlreactjsnext.jsrenderingmern

CSS - Layering new DIVs over existing DIVs

My goal is to implement "vertical-align: bottom;" in order for the DIVs to align from the bottom of the wrapper/parent DIV to the top. However, I am facing an issue where I want the first DIVs to be displayed at the bottom, rather than at the default top p ...

htmlcssflexbox

I am unable to retrieve images using the querySelector method

Trying to target all images using JavaScript, here is the code: HTML : <div class="container"> <img src="Coca.jpg" class="imgg"> <img src="Water.jpg" class="imgg"> <img src="Tree.jpg" class="imgg"> <img src="Alien.jpg" class=" ...

javascripthtmlcssdomcss-selectors

What is the best way to enlarge the text in an image input field?

One of the input fields I'm working with looks like this: <input type="image" name="submit" value="submit" src="images/searchb1.png" id="button1"/> I am trying to figure out how to enlarge the text Submit on that field using CSS. Any suggestio ...

htmlcssinput

Sharing package JSON file dependencies with child engines and addons in Ember.js

I am seeking information on how Ember Js can share the parent app's package.json file dependency (xyz:3.0.0) with child engines and addons without them needing to redeclare the dependencies in their own package.json files. This is to reduce the overal ...

javascripthtmlnpmember.jspackage.json

Incorporate a local asciinema file into an HTML document

Is there a way to embed a local asciinema session into an html file? Here is how my directory is structured: $ tree . ├── asciinema │ └── demo.cast ├── css │ └── asciinema-player.css ├── index.html ├── js │ ...

javascripthtmlcssasciinema

Adding content between previous and next buttons with the use of JavaScript

After successfully implementing the functionality for the previous and next buttons in my script, I was requested to include the date between the buttons like this: btnPrev issueDate btnNext < Date > Although I tried adding the date between the PREV ...

javascripthtmljquerycss

Can you provide guidance on how to successfully transfer an array of JSON objects from the script section of an HTML file to the JavaScript

My webpage contains an array of JSON objects that I need to send to the server. The array, stored in a variable called results, appears normal when checked in the console before trying to POST it. Here is a sample of the data: 0: {id: 02934, uName: "Ben", ...

javascriptjqueryhtmlarraysjson

CSS and the best practices for button styling in a navigation bar

My friend and I are facing a CSS issue while working on a webpage together. We both have limited experience with HTML and CSS. Here's the code snippet in question: .nav li { margin: auto; display: inline-block; color: white; padding: 10px; font ...

htmlcsshtml-listsnav

Chrome isn't displaying the text color of the link

I'm having an issue with a link that is styled like a button. It looks fine in Internet Explorer and Firefox, but not on Chrome. For example: The problem lies with the teal button in the center of the page that reads "follow issue." I intended for ...

htmlcss

css how to style a table row with a specific identifier

Although this question has been asked millions of times on the internet, my English skills are not great and I struggle to find the right words to search. I have a table with a specific ID set up like this: <table class="tableClass"> <tr id="one ...

css

What are the best practices for implementing media queries in Next.js 13.4?

My media queries are not working in my next.js project. Here is what I have tried so far: I added my queries in "styles.module.css" and "global.css" and imported them in layout.js I included the viewport meta tag under a Head tag in layout.js This is how ...

javascriptcssnext.jsmedia-queries

Having difficulty retrieving the value from a database column as it consistently displays both the column name and value

I am currently working on setting up a dynamic site title that will be controlled by my database. This way, I can easily update the database with a new title and have it reflect on my website. Below is an example of the controller setup: TestController: ...

phpmysqlhtmlvariableslaravel-5

Aligning Text Vertically with an Image in ul/li List Items

Apologies if this question has already been asked, but I've checked several similar inquiries in an attempt to merge the solution without much luck. I currently have a bootstrap row with two col-md-6's. The first column contains an image, while t ...

htmlcsstwitter-bootstrapvertical-alignment

Contrast between pre-tag in HTML and white-space: pre newline exclusion

I originally thought that the pre(html tag) would act just like 'white-space:pre'. However, it turns out that it does not behave in the same way. <pre> aaa bbb </pre> <p style="white-space:pre;"> aaa bbb </p> The <pr ...

htmlcss

Creating a moving background for a loading bar with HTML5 and Shadow DOM is currently underway

Can anyone help with animating the progress bar using the HTML5 <progess> tag? I've been able to customize the Shadow DOM elements successfully, but I'm having trouble animating the background (repeating linear gradient). It seems to work i ...

htmlcssprogress-barlinear-gradientsrepeating-linear-gradient

Automatically populate the checkbox with the specified URL

Is it possible to pre-fill a checkbox in an HTML form using the URL? For example, if we have a URL like www.example.com/?itemname=sth Would there be a similar method to pre-select a checkbox via the URL? <ul class="list-group"> <li c ...

phphtmlurlcheckbox

Is there a way to position the search bar on a new line within the navigation bar when the screen size is at its maximum width for mobile

I have a search bar on my navigation bar, but I am looking to move it to the next line within a maximum width if the screen display is extra small (xs) or for mobile devices. Below is the code snippet: <nav class="navbar navbar-expand-md fixed-top ...

htmlcsssearchlayoutbootstrap-4

Flask does not provide a direct boolean value for checkboxes

After struggling for a week, I am still lost on where to make changes in my code. I need the checkbox to return a boolean value in my Flask application. Below are snippets of the relevant code: mycode.py import os, sqlite3 from flask import Flask, flash ...

javascriptpythonhtmlcssflask

Utilizing inline JavaScript to automatically refresh a webpage at specified intervals and monitor for updates within a specific div element

I am currently working on creating an inline script that will automatically refresh a webpage at regular intervals and check for changes in a specific element. If the element meets certain criteria, then the script should proceed to click on a designated b ...

javascripthtmlreloadintervals