Ways to increase the shrinking capacity of flex items when the entire container width is occupied

Question

Ways to increase the shrinking capacity of flex items when the entire container width is occupied

Recent Post Below: I've replicated a minimized issue: https://codepen.io/MH-123/pen/ExJWQWq?editors=1100 In the provided CodePen, the problem persists. Two divs are present, but flex shrink functionality is not working as expected.

The main flex container consists of a single row with two columns. Each column is also a flex container, but this detail may not be relevant. My goal is for the left column to shrink faster than the right column when the screen width is reduced horizontally, resulting in a proportional reduction in size for the items within the columns.

Despite numerous attempts, such as applying flex shrink to the columns, adjusting flex basis, and eliminating widths, the issue remains unresolved:

https://codepen.io/MH-123/pen/gOymoqM?editors=1100

/* BASE STYLES */
:root {
  --clr-dark: #0f172a;
  --clr-light: #f1f5f9;
  --clr-accent: #e11d48;
}

*,*::before,*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  line-height: 1.6;
  word-spacing: 1.4px;
  font-family: "Roboto", sans-serif;
  color: var(--clr-dark);
  background-color: var(--clr-light);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  width: 50%;
  height: 650px;
  margin: 0 auto;
  border: 10px solid var(--clr-dark);
}

.item {
  background-color: #fb7185;
  
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
}

/* END OF BASE STYLES */
.container {
  display: flex;
  flex: row nowrap;
}

.colLeft, .colRight {
  height: 100%;
  border: 5px solid blue;
  
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-evenly;
  align-items: center;
  align-content: space-around;
}
.colLeft {
  flex-grow: 1;
  flex-shrink: 10;
}
.colRight {
  flex-grow: 1;
  flex-shrink 1;
}

.item-1 {
  flex: 0 1 30%;
  width: 95%;
  
  display: flex;
}

.item-a {
  height: 100%;
  width: 50%;
}

.item-b {
  height: 100%;
  width: 50%;
}

.item-2 {
  flex: 0 1 55%;
  width: 95%;
}
.item-3 {
  flex: 0 0 55%;
  width: 95%;;
}
.item-4 {
  flex: 0 0 30%;
  width: 95%;
}

<div class="container">
  <div class="colLeft">
    <div class="item item-1">
      <div class="item item-a">1a</div>
      <div class="item item-b">1b</div>
    </div>
  
    <div class="item item-2">2</div>
  </div>
  <div class="colRight">
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
  </div>
</div>

edit: Here's another CodePen version where I've removed all widths from the children https://codepen.io/MH-123/pen/abxJqZg?editors=0100

javascript html css flexbox

Answer 1

Answer №1

To achieve the desired layout, consider adding flex: 1; to both columns.

.colLeft, .colRight {
  height: 100%;
  border: 5px solid blue;
  
  display: flex;
  flex: 1; /* Utilize flex to make both columns share space */
  flex-flow: column nowrap;
  justify-content: space-evenly;
  align-items: center;
  align-content: space-around;
}

In my experience, this adjustment produced the desired outcome.

I also spotted a few errors that need fixing.

.colRight {
  flex-grow: 1;
  flex-shrink: 1; /* Corrected missing colon */
}

.item-3 {
  flex: 0 0 55%;
  width: 95%; /* Removed extra semicolon */
}

Implement these changes, and I believe you'll be satisfied with the end result.

Answer 2

To achieve the desired layout, consider adding flex: 1; to both columns.

.colLeft, .colRight {
  height: 100%;
  border: 5px solid blue;
  
  display: flex;
  flex: 1; /* Utilize flex to make both columns share space */
  flex-flow: column nowrap;
  justify-content: space-evenly;
  align-items: center;
  align-content: space-around;
}

In my experience, this adjustment produced the desired outcome.

I also spotted a few errors that need fixing.

.colRight {
  flex-grow: 1;
  flex-shrink: 1; /* Corrected missing colon */
}

.item-3 {
  flex: 0 0 55%;
  width: 95%; /* Removed extra semicolon */
}

Implement these changes, and I believe you'll be satisfied with the end result.

Answer 3

Answer №2

I utilized JavaScript to retrieve the width of the .container element before resizing it, and then utilized this width as a CSS variable to calculate the flex-basis.

const container = document.querySelector(".container");
container.style.setProperty("--current-container-width", `${container.offsetWidth / 2}px`);

:root {
  --clr-dark: #0f172a;
  --clr-light: #f1f5f9;
  --clr-accent: #e11d48;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  line-height: 1.6;
  word-spacing: 1.4px;
  font-family: "Roboto", sans-serif;
  color: var(--clr-dark);
  background-color: var(--clr-light);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  width: 50%;
  height: 650px;
  margin: 0 auto;
  border: 10px solid var(--clr-dark);
}

.item {
  background-color: #fb7185;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
}


/* END OF BASE STYLES */

.container {
  display: flex;
  flex: row nowrap;
}

.colLeft,
.colRight {
  height: 100%;
  border: 5px solid blue;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-evenly;
  align-items: center;
  align-content: space-around;
}

.colLeft {
  flex-grow: 1;
  flex-shrink: 1;
}

.colRight {
  flex-basis: max(50%, var(--current-container-width));
  max-width: calc(100% - 53.4px);
  flex-shrink: 0;
}

.item-1 {
  flex: 0 1 30%;
  width: 95%;
  display: flex;
}

.item-a {
  height: 100%;
  width: 50%;
}

.item-b {
  height: 100%;
  width: 50%;
}

.item-2 {
  flex: 0 1 55%;
  width: 95%;
}

.item-3 {
  flex: 0 0 55%;
  width: 95%;
  ;
}

.item-4 {
  flex: 0 0 30%;
  width: 95%;
}

<div class="container">
  <div class="colLeft">
    <div class="item item-1">
      <div class="item item-a">1a</div>
      <div class="item item-b">1b</div>
    </div>

    <div class="item item-2">2</div>
  </div>
  <div class="colRight">
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
  </div>
</div>

Answer 4

I utilized JavaScript to retrieve the width of the .container element before resizing it, and then utilized this width as a CSS variable to calculate the flex-basis.

const container = document.querySelector(".container");
container.style.setProperty("--current-container-width", `${container.offsetWidth / 2}px`);

:root {
  --clr-dark: #0f172a;
  --clr-light: #f1f5f9;
  --clr-accent: #e11d48;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  line-height: 1.6;
  word-spacing: 1.4px;
  font-family: "Roboto", sans-serif;
  color: var(--clr-dark);
  background-color: var(--clr-light);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  width: 50%;
  height: 650px;
  margin: 0 auto;
  border: 10px solid var(--clr-dark);
}

.item {
  background-color: #fb7185;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
}


/* END OF BASE STYLES */

.container {
  display: flex;
  flex: row nowrap;
}

.colLeft,
.colRight {
  height: 100%;
  border: 5px solid blue;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-evenly;
  align-items: center;
  align-content: space-around;
}

.colLeft {
  flex-grow: 1;
  flex-shrink: 1;
}

.colRight {
  flex-basis: max(50%, var(--current-container-width));
  max-width: calc(100% - 53.4px);
  flex-shrink: 0;
}

.item-1 {
  flex: 0 1 30%;
  width: 95%;
  display: flex;
}

.item-a {
  height: 100%;
  width: 50%;
}

.item-b {
  height: 100%;
  width: 50%;
}

.item-2 {
  flex: 0 1 55%;
  width: 95%;
}

.item-3 {
  flex: 0 0 55%;
  width: 95%;
  ;
}

.item-4 {
  flex: 0 0 30%;
  width: 95%;
}

<div class="container">
  <div class="colLeft">
    <div class="item item-1">
      <div class="item item-a">1a</div>
      <div class="item item-b">1b</div>
    </div>

    <div class="item item-2">2</div>
  </div>
  <div class="colRight">
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
  </div>
</div>

Answer 5

Answer №3

Method 1: To maintain the right column's width, consider setting a min-width. This will cause the left column to adjust its width based on the window size.

.colRight{ min-width: 300px; }

Method 2: If you need to adjust the width of the right column, utilize media queries. The following example demonstrates 4 media queries:

For less than 400px => Ratio is 1 to 4

For between 401px and 800px => Ratio is 1 to 3

For between 801px and 1000px => Ratio is 1 to 2

For greater than 1001px => Ratio is 1 to 1

/* BASE STYLES */
.container {
  display: flex;
}

.colLeft, .colRight {
  height: 100%;
  border: 5px solid blue;
  
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-evenly;
  align-items: center;
  align-content: space-around;
}

@media screen and (max-width: 400px) {
  .colLeft {
    flex: 1;
  }

  .colRight {
    flex: 4;
  }
}

@media screen and (min-width: 401px) and (max-width: 800px) {
  .colLeft {
    flex: 1;
  }

  .colRight {
    flex: 3;
  }
}

@media screen and (min-width: 801px) and (max-width: 1000px) {
  .colLeft {
    flex: 1;
    }

  .colRight {
    flex: 2;
  }
}

@media screen and (min-width: 1001px) {
  .colLeft {
    flex: 1;
    flex-grow: 1;
  }

  .colRight {
    flex: 1;
    flex-grow: 1;
  }
}

Method 3: Alternatively, use media queries with a grid layout instead of flexbox. The concept remains similar, with the following proportions:

For less than 400px => Ratio is 1 to 6

For between 401px and 800px => Ratio is 1 to 4

For between 801px and 1000px => Ratio is 1 to 2

For greater than 1001px => Ratio is 1 to 1

/* BASE STYLES */
.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 400px) {
    .container{
        grid-template-columns: 1fr 6fr;
    }
}
@media screen and (min-width: 401px) and (max-width: 800px) {
   .container{
        grid-template-columns: 1fr 4fr;
    }
}
@media screen and (min-width: 801px) and (max-width: 1000px) {
    .container{
        grid-template-columns: 1fr 2fr;
    }
}

Answer 6

Method 1: To maintain the right column's width, consider setting a min-width. This will cause the left column to adjust its width based on the window size.

.colRight{ min-width: 300px; }

Method 2: If you need to adjust the width of the right column, utilize media queries. The following example demonstrates 4 media queries:

For less than 400px => Ratio is 1 to 4

For between 401px and 800px => Ratio is 1 to 3

For between 801px and 1000px => Ratio is 1 to 2

For greater than 1001px => Ratio is 1 to 1

/* BASE STYLES */
.container {
  display: flex;
}

.colLeft, .colRight {
  height: 100%;
  border: 5px solid blue;
  
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-evenly;
  align-items: center;
  align-content: space-around;
}

@media screen and (max-width: 400px) {
  .colLeft {
    flex: 1;
  }

  .colRight {
    flex: 4;
  }
}

@media screen and (min-width: 401px) and (max-width: 800px) {
  .colLeft {
    flex: 1;
  }

  .colRight {
    flex: 3;
  }
}

@media screen and (min-width: 801px) and (max-width: 1000px) {
  .colLeft {
    flex: 1;
    }

  .colRight {
    flex: 2;
  }
}

@media screen and (min-width: 1001px) {
  .colLeft {
    flex: 1;
    flex-grow: 1;
  }

  .colRight {
    flex: 1;
    flex-grow: 1;
  }
}

Method 3: Alternatively, use media queries with a grid layout instead of flexbox. The concept remains similar, with the following proportions:

For less than 400px => Ratio is 1 to 6

For between 401px and 800px => Ratio is 1 to 4

For between 801px and 1000px => Ratio is 1 to 2

For greater than 1001px => Ratio is 1 to 1

/* BASE STYLES */
.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 400px) {
    .container{
        grid-template-columns: 1fr 6fr;
    }
}
@media screen and (min-width: 401px) and (max-width: 800px) {
   .container{
        grid-template-columns: 1fr 4fr;
    }
}
@media screen and (min-width: 801px) and (max-width: 1000px) {
    .container{
        grid-template-columns: 1fr 2fr;
    }
}

Ways to increase the shrinking capacity of flex items when the entire container width is occupied

Answer №1

Answer №2

Answer №3

Similar questions

Creating a PHP JSON response that incorporates an HTML layout is a dynamic

Tips for integrating Bootstrap JavaScript into a React project

An HTML table featuring rows and columns that can be adjusted in size separately from the content within each cell

What is the best way to update the state by either adding to it or replacing it if the key

Are There Other Ways to Replicate the Actions of an Anchor Link/Target Pseudo-Class?

Importing JSON Data into an HTML File

Verify if session is in existence

Running a code from a plugin in Wordpress site

Send information through a form by utilizing a personalized React hook

Troubleshooting problem: Unable to restrict table selections - issue with Material UI table in React

Open the link and input the text into the text box?

Issue with Angular drag and drop functionality arises when attempting to drop elements within an n-ary tree structure displayed using a recursive template

Encountered a runtime error while trying to insert a list item <li> into a paragraph <p> element

Simple steps to trigger a PHP page from a JavaScript page by utilizing express functions

Can you navigate to HTML files using Vue router?

emulating an android device to test html5 applications

Error encountered in Express.js blogging app: Issue arises when attempting to filter posts by category, resulting in a "Cast to ObjectId failed" error

Encountered an error: Object(...) does not conform to function standards in the handleChange method

What is the process for turning off caching in CORS-Anywhere?

Does using .stopImmediatePropagation() in the click event of a menu item have any impact on analytical tools?