Question 363455 in Html Question posted in
Some basic documentation can be found here.

Html – How to make flex item shrink more when full container width is taken

Original Post Below:
I’ve reproduced a reduced problem:
https://codepen.io/MH-123/pen/ExJWQWq?editors=1100
Here’s the code pen, read below for the issue, it remains the same. I have two divs, but flex shrink isn’t working on them and I’m not sure why.

I have a main flex container, that contains 1 row of 2 columns. (Each column is a flex container as well but I don’t think that should matter?).

Anyways, when the user shrinks the screen horizontally, I want the left column to shrink faster than the right column (which should make the columns’ items smaller proportionally).

I’ve tried lots of things, adding flex-shrink to the columns, altering flex-basis, removing widths, etc. but nothing seems to work:

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 my codepen where I remove all widths’ from children
https://codepen.io/MH-123/pen/abxJqZg?editors=0100

Tags:

3

Answers


  1. 0

    ¿have you tried using display: grid for .container{} and some media queries to adapt the width of the columns?

    Check what I changed of your styles:

    https://gist.github.com/karolans25/1f2252a19f8c196fcec8083a1bc9ec65

    Let me know if it’s what you need.

    Login or Signup to reply.
  2. 0

    You could add flex: 1; to both columns.

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

    This seemed to get the desired result for me.

    I also noted these typos.

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

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

    Make these adjustments and I think you’ll be happy with the result.

    Login or Signup to reply.
  3. 0

    I used js to get the width of .container before resize, and use the width as css variable to calculate 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search