Allocating the remaining container space to a lone flex item

Imagine a scenario where I have a flex container with children that completely fill the container.

.container {
  display: flex;
  width: 150px;
}

.item {
  flex: 1 1 50px;
  border: 1px solid blue;
}
<div class="container">
  <div class="item">
    <p>1</p>
  </div>
  <div class="item">
    <p>2</p>
  </div>
  <div class="item">
    <p>3</p>
  </div>
</div>
</div>

When clicked, I want to add extra space to item number 2 without affecting the other blocks. The goal is to increase the width of the container and allocate this space only to the clicked item. However, I'm unsure if it's possible to assign additional space to a single flex item using flexbox.

P.S. I require my items to be resizable, hence the flex-grow property must be set to 1 for the items.

htmlcsslayoutflexbox

Answer №1

If you allow the elements to expand and contract freely, it's best not to specify a fixed flex-basis value.

Each child element can be resized using width, min-width, or flex-grow properties.

Here is an example showcasing these three rules with flex-basis set to auto:

* {
  box-sizing: border-box;
}

body {
  display: flex;
  gap: 1em;
}

.container {
  display: flex; 
  width: 150px;
}

.item {
  flex: 1 1 auto;  
  border: 1px solid blue; 
}

.item:focus { 
  border-color: red;
}

.width .item:focus {
  width: 66.66%; 
}

.min-width .item:focus {
  min-width: 66.66%;
  border-color: yellow;
}

.grow-4 .item:focus {
  flex-grow: 4;
  border-color: hotpink;
}
<div class="container width">
  <div class="item" tabindex="0">
    <p>1</p>
  </div>
  <div class="item" tabindex="0">
    <p>2</p>
  </div>
  <div class="item" tabindex="0">
    <p>3</p>
  </div>
</div><div class="container min-width">
  <div class="item" tabindex="0">
    <p>1</p>
  </div>
  <div class="item" tabindex="0">
    <p>2</p>
  </div>
  <div class="item" tabindex="0">
    <p>3</p>
  </div>
</div><div class="container grow-4">
  <div class="item" tabindex="0">
    <p>1</p>
  </div>
  <div class="item" tabindex="0">
    <p>2</p>
  </div>
  <div class="item" tabindex="0">
    <p>3</p>
  </div>
</div>

To prevent shrinking: instead of setting flex-shrink to 1, set it to 0 and allow wrapping or overflow. Flex-basis can handle this task on its own, and flex-grow can be reset to 0 if needed.

* {
  box-sizing: border-box;
}

body {
  display: grid;
  gap: 1em;
}

.container {
  display: flex; 
  width: 150px;
  background: silver;
}

.container + .container {
  flex-wrap: wrap;
}

.item {
  flex: 0 0 33.33%;  
  border: 1px solid blue; 
}

.item:focus { 
  border-color: red;
  flex-basis: 66.66%; 
}
<div class="container">
  <div class="item" tabindex="0">
    <p>1</p>
  </div>
  <div class="item" tabindex="0">
    <p>2</p>
  </div>
  <div class="item" tabindex="0">
    <p>3</p>
  </div>
</div>
<div class="container">
  <div class="item" tabindex="0">
    <p>1</p>
  </div>
  <div class="item" tabindex="0">
    <p>2</p>
  </div>
  <div class="item" tabindex="0">
    <p>3</p>
  </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

What is the best way to conceal floated elements with overflow in CSS?

How can I ensure that my block container element only displays the content of block elements, cutting off any floated elements that are taller than the parent container? Applying overflow: hidden seemed like a simple solution, but it created a new block f ...

css-floatcss

Is there a way to ensure a Javascript alert appears just one time and never again?

I struggle with Javascript, but I have a specific task that needs to be completed. I am participating in a school competition and need an alert to appear only once throughout the entire project, not just once per browsing session. The alert will inform ...

javascriptjqueryhtmlcssalert

Is there a method to use media queries to dynamically switch JavaScript files based on the user's device?

I've been working on optimizing the mobile layout of my website, and while I have successfully implemented a media query with a different stylesheet for mobile devices, I'm struggling to determine if it's feasible to also load a separate Jav ...

javascriptcssmedia-queries

Redirecting after executing JavaScript code

Is it possible to implement a redirect after the subscription script for push notifications has been executed successfully? <script> var OneSignal = window.OneSignal || []; OneSignal.push(function() { OneSignal.init({ ...

javascripthtmlpush-notification

Resizing the background while scrolling on a mobile web browser

My website background looks great on desktop, but on mobile (using Chrome) the background starts to resize when I scroll, mainly due to the browser search bar hiding and reappearing upon scroll. Is there a way to prevent my background from resizing? Check ...

javascripthtmlcss

provide a hyperlink to the icon located in front of the navigation bar

I'm struggling to come up with a suitable title for this issue. What I am trying to achieve is placing a small icon in front of the navbar so that visitors can click on it and be directed to another site. Initially, I attempted to place the icon using ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a child missing? If so, add a class

I need to add the class span.toggle if the parent element of li does not have a child ul element. click here to view on codepen Snippet of HTML: <html lang="en"> <head> <meta charset="UTF-8> <title>No Title</title>& ...

javascriptjqueryhtmlcss

Layering elements using the z-index property in Internet Explorer 7,

Issue with text placement in a dialog div only occurring in IE 7. To see the problem, visit this page and click on any of the text boxes on the left side. Attempts to fix by adjusting z-index in the skin.css file for div.dialogFromAndTo did not resolve ...

cssinternet-explorer-7

The left side of my image doesn't quite reach the edges of the screen as desired

Even after setting the padding and margin in the parent container to 0, the image is still not filling to the edges. Here is the image. This snippet of code shows my JavaScript file: import styles from './css/Home.module.css'; export default fun ...

htmlcssreactjs

Issue with interactive rows in a table ( Rails Version 4 )

I am encountering an issue with a table that is linked to a customer show page _table.html.erb <table class="table table-striped table-bordered table-hover table-condensed"> <thead> <tr> <th width="50"><%= sort_link ...

htmlcssruby-on-rails

Adjust the viewing area dimensions on a web browser

Recently, while testing a web application page I developed with Selenium, I came across an interesting issue. After using the JavaScriptExecutor in Selenium to get the viewport size, I found that it was different for Chrome, IE, and Firefox. The sizes wer ...

javascripthtmlseleniumselenium-webdriver

Resource loading error: The server returned a 404 (Not Found) status code, as shown in the console

Click here I have a simple file structure where index.html, script.js, and login.js are all in the same root folder without any subfolders. The issue I'm facing is that although the connection to the database works fine, there seems to be a problem wi ...

javascripthtmlmysqlnode.jsforms

I can't seem to figure out why I constantly struggle with adding a check mark to a checkbox using

Take a look at the code I've provided below : HTML : <input type="checkbox" name="xyz[1][]" id="sel_44" style="margin:2px;" value="12345" onclick="myClick(this)"> Javascript : <script> $('#sel_44').attr("checked", true); < ...

javascriptjqueryhtmlcheckbox

Tips for organizing list items in a grid format using CSS and HTML

In my div block, the width is not fixed. Inside the div, there is a list block with 11 items that I want to display evenly like this: ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## I&a ...

htmlcss

"Generate a series of dropdown menus with choices using either jQuery or AngularJS from a JSON dataset

I'm in need of assistance. I want to generate select dropdowns dynamically based on data retrieved from my REST API, which is in JSON format. How can I dynamically inject these selects into my HTML? Below is an example data structure: JSON data fetch ...

javascriptjqueryhtmljsonangularjs

Images that adjust to different screen sizes within a grid layout

I have four images that need to be aligned in the following layout: ____________ |1 |4 | |_____| | |2 |3| | |__|__|______| They must be flush against each other, occupy 100% of the viewport's width, and most importantly, be respon ...

javascripthtmlcsstwitter-bootstrap

Printing without page borders

Is there a way to prevent the border on my pages from being printed? I've tried various solutions without success. Here is the code I am currently using: CSS: #pagy2 { background: #f3fff3; border:1px solid #c9dbab; width: 100%; margi ...

cssprintingborder

Use a for loop to iterate through elements and retrieve input values using getElementById()

As I work through a for loop in JavaScript, I am utilizing the getElementById() method to fetch multiple input values. To begin, I dynamically created various input boxes and assigned distinct id's using a for loop. Subsequently, I am employing anoth ...

javascripthtmlloopsgetelementbyid

Python code for clicking a button using Selenium

I'm having trouble closing popup windows in Selenium with Python. The button labeled "joyride-close-tip" is functioning correctly and closes the window, but the other two buttons are not working. What could be causing this issue? Even though I copied ...

pythonhtmlselenium-webdriverweb-scrapingpopup

The feature to hide columns in Vue-tables-2 seems to be malfunctioning

The issue I'm facing is with the hiddenColumns option not working as expected. Even when I set it to hiddenColumns:['name'], the name column remains visible. I've updated to the latest version, but the problem persists. UPDATE I am tr ...

javascripthtmlvue.jsvue-tables-2