Guide to arranging multiple divs in a linear fashion and utilizing the div's individual widths without expanding to fit the container's width

Can someone provide assistance with flexbox resizing and expanding content within the same line without wrapping? I have multiple div elements, each 50px in length, arranged to appear as one continuous line. The odd milestone markings are displayed at the top of the line, while all even mile numbers are shown at the bottom. The number of miles varies dynamically based on server-side data.

My application allows for viewing pages in both desktop and mobile versions. When viewed on smartphones, I need the line to shrink proportionally along with the mile markings. I am seeking help with the following:

  1. When viewed from a desktop screen, I want each line's width set to 50 pixels.
  2. I do not want the line to stretch or shrink to fill the entire browser window if there are only a few mile markers displayed initially.
  3. When viewed on a smartphone, if the number of miles exceeds the available width, I want the line to shrink to fit them all on the same line.

I have tried adjusting the flex-shrink and flex-basis properties but have had no success. Any guidance would be greatly appreciated.

The issue I am facing is that when the page loads on a desktop browser, the line expands to the maximum width of the browser window. I want it to adhere to the width of each individual mile marker (50px) multiplied by the total number of miles displayed. If only a few miles are present, I do not want the line to stretch to the full width of the screen. Likewise, if the number of miles exceeds the screen width, I want the line to shrink accordingly.

cssflexbox

Answer №1

Instead of specifying a width, utilize the flex properties to ensure that the mile marker cannot expand, but can shrink and will always have a default size of 50px.

This translates to: flex: 0 1 50px;

When there is enough space available, the markers will maintain a width of 50px. However, if the viewport width is limited, the markers will dynamically shrink in proportion.

.mile {
  height: 3px;
  flex: 0 1 50px;
  background: blue;
}

.mile:nth-child(2n) {
  background: red;
}

.wrap {
  display: flex;
  margin-bottom: 1em;
}
<p>10M</p>

<div class="wrap">
  <div class="mile"></div>
  <div class="mile"></div>
  <div class="mile"></div>
  <div class="mile"></div>
  <div class="mile"></div>
  <div class="mile"></div>
  <div class="mile"></div>
  <div class="mile"></div>
  <div class="mile"></div>
  <div class="mile"></div>
</div>
<p>3M</p>
<div class="wrap">
  <div class="mile"></div>
  <div class="mile"></div>
  <div class="mile"></div>
</div>
<p>16M</p>
<div class="wrap">
  <div class="mile"></div>
  <div class="mile"></div>
  <div class="mile"></div>
  <div class="mile"></div>
  <div class="mile"></div>
  <div class="mile"></div>
  <div class="mile"></div>
  <div class="mile"></div>
  <div class="mile"></div>
  <div class="mile"></div>
  <div class="mile"></div>
  <div class="mile"></div>
  <div class="mile"></div>
  <div class="mile"></div>
  <div class="mile"></div>
  <div class="mile"></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

Guide on transferring values from a Python list to an HTML progress bar

In my application, users can read news items and leave comments. These comments are then analyzed using NLP techniques to classify them as either positive or negative. My goal is to display the percentage of positive and negative comments for each news ite ...

pythonhtmlcssdjango

Unable to display imported image in React application

I have a component where I want to display an image: import React from 'react' import background from '../media/content-background.jpg' function ContentPage(){ return( <div id="content-page"> < ...

htmlcssnode.jsreactjswebpack

Equalizing the space between table headings and content

I am struggling with aligning the heading and entries in my table properly. https://i.stack.imgur.com/IYtY1.jpg My goal is to ensure that the heading and entries are perfectly aligned with each other. This is how my Table.jsx looks like: <div classNa ...

cssreactjs

Attempting to connect CSS to an HTML document within a Django development project

Directories Here is a photo of my directories. I am currently trying to utilize sudokuStyle.css in sudoku_board.html, but for some reason it does not appear to be linking properly in my HTML file. Below is the code snippet from my head section: {% load st ...

htmlcssdjangoweb

Ant Design: Incorporating margin and padding causes slight rendering glitches in the markup

https://i.sstatic.net/BWmFU.gif https://i.sstatic.net/ZaLH8.gif When I apply margin and padding to this class, it starts twitching like in the first GIF. Removing the margin and padding fixes the issue, but I need them for styling. What is causing this ...

htmlcssreactjsnext.jsantd

Tips for updating the color of table data when the value exceeds 0

I'm currently working on developing a transaction table that is intended to display debit values in red and credit values in green. However, I would like these colors to only be applied if the value in the table data is greater than 0 via JavaScript. ...

javascripthtmlcss

Expanding DIV to cover entire width of screen

Allow me to explain my current predicament: In the following code snippet, I have a simple div element. However, upon running the code, I am presented with a gray box that does not span across the entire browser window as I had intended. Instead, it appea ...

csswidthhtml

Why won't my Twitter Bootstrap navigation bar apply the styles?

I am currently working on a Rails app (4.0) and have incorporated Bootstrap 3 into my project. Both bootstrap.css and bootstrap-theme.css are stored in the stylesheets directory, while bootstrap.js is located in the javascripts directory. Most of the Boots ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Learn how to collapse a list by clicking outside of it on the document with the following code: $(document).on("click"

I want to create a collapsible/expandable menu for my website. I had a version where hovering over a category would expand the subcategory, but what I really need is for the subcategories to expand when I click on a category and remain expanded until I cli ...

javascripthtmlcss

CSS Class ID selection for selectpicker

I have two classes: selectpicker with different IDs: selected_Test_Platforms and selected_SIL_relevant I am trying to assign a preselection from an array called "availableTestPlatforms" to the selected_Test_Platforms. Currently, when I use the selector $( ...

javascriptjquerycsscss-selectors

Whenever I trim down the images, the captions somehow get lost in the thumbnail

My issue arises when cropping photos, as the captions end up being hidden within the thumbnail images. How can I ensure that the captions are visible and also make all images the same height? I am striving to achieve a layout similar to this: ![][2] ...

javascriptjqueryhtmltwitter-bootstrapcss

"Guide to triggering the display of a particular div based on its class when clicked

I have multiple div elements with the class name dis HTML: <div class="dis">Content</div> <div class="dis">Content</div> <div class="dis">Content</div> and so on ... Additionally, there are various images: <img sr ...

javascripthtmlcss

Arranging arrays in a MySQL gallery using PHP for optimal sorting

I've been attempting to organize my images from the database in a grid list format like this: ... I'm feeling stuck and unsure of what changes to make in my code. I really need some assistance, as I'm working on setting up an online store. ...

phphtmlmysqlcssweb

"Stylish navigation bar overlaying a stunning background image in Bootstrap 4.0

Is there a way to ensure that my navbar stays on top of my background image in bootstrap 4.0 without using negative margin top? I want a solution that is easy to work with even if changes are made to the site. HTML: <div class="masthead"> <n ...

htmlcsstwitter-bootstrapbootstrap-4styles

What is the best way to implement a sidebar closing animation?

Utilizing both react and tailwindcss, I successfully crafted a sidebar menu that elegantly appears from left to right when the user clicks on the hamburger icon. However, my attempts to create a reverse animation as the sidebar disappears from right to lef ...

javascriptcssreactjsnext.jstailwind-css

Inaccurate rendering of border widths on IOS platform

After setting the border width of these input boxes to 1px, it appears that on iOS devices, the top border seems larger than intended (regardless of the browser being used). Interestingly, on any other type of device, the border looks perfectly fine. & ...

htmlioscss

input the css content into the directive

Can the content of a CSS class be used in a directive to display different icons from FontAwesome? template <div class="modal-tooltip" tabindex="-1"> <span class="CSS-CLASS-I-WANT-TO-PASS-IN"></span> <div class="tool ...

cssangularjsangularjs-directivetypescript

Strategies for Improving CSS Loading Speed

I have tried optimizing the CSS code for the following links, but I am still receiving an error message about optimized CSS delivery. http://fonts.googleapis.com/css?family=Droid+Sans%7CUbuntu+Condensed&ver=3.6 http://www.sampleurl.com/wp-content/th ...

cssoptimization

Storing a chosen avatar in a database: A step-by-step guide

I am looking to display a selection of 10 avatars on my website for users to choose from. There will be no option for users to upload their own avatar. Users will simply click on the avatar image they want and then click the "done" button. The selected ava ...

javascripthtmlcssmysqlbootstrap-4

I am encountering an issue with the navigation bar and container layout in Bootstrap

I'm new to utilizing bootstrap and currently, I'm working on creating a navigation bar. Here is the code that I have written: <nav class="row navbar navbar-expand-lg navbar-light bg-white"> <a href="#&q ...

htmlcssbootstrap-4