How to calculate the actual width of child elements of a flexbox container?

Question

I have such html and css code. I have two questions:

1. When the window width is 600px, in theory, the left box should be of 150px width, because it's the 25% of the parent(600px), but the width is 120px.
2. The right box can not reach 100vw. It just takes the widthOfParent - widthOfLeft. I suppose it should somehow overflow and reach 100vw.

 <div class="container">
        <div class="left"></div>
        <div class="right"></div>
 </div>

* {
  margin: 0;
  padding: 0;
}
.container {
  height: 300px;
  /* your code here */
  display: flex;
  justify-content: start;
}

.left {
  background-color: #f44336;
  height: 100%;
  width: 25%;
  min-width: 100px;
}

.right {
  background-color: #2973af;
  height: 100%;
  width: 100vw;
}

codesanbox: https://codesandbox.io/s/admiring-darkness-cu99x?file=/src/styles.css:0-293

Answer 1

You are facing the shrink effect. In all the cases the total width 100vw + 25% is bigger than 100% so both items will shrink equally.

Since your container is also full width, the overflow will always be equal to 25% or 25vw. Both element have the default shrink value 1 so we have a sum equal to 125vw.

The first element width will be equal to: 25vw - (25vw * 25vw/125vw) = 20vw and the width of the second item will be: 100vw - (25vw * 100vw/125vw) = 80vw

You can logically see that the total is 100vw (20vw + 80vw) and when the screen width is equal to 600px, 20vw is equal 120px.

To avoid this, disable the shrink effect on the first item by setting flex-shrink:0

* {
  margin: 0;
  padding: 0;
}

.container {
  height: 300px; /* your code here */
  display: flex;
}

.left {
  background-color: #f44336;
  width: 25%;
  min-width: 100px;
  flex-shrink:0;
}

.right {
  background-color: #2973af;
  width: 100vw;
}

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

Related: Why is a flex item limited to parent size?

Answer 2

1. use "flex" property instead of width for the flex items

.container {
    height: 300px;
    width: 600px; /* added fixed width for testing */
    display: flex;
    justify-content: start;
}

.left {
    background-color: #f44336;
    min-width: 100px;
    flex: 1; /* 1/4 ratio within the parent element, as the other flex item in the parent is "flex: 3;" */
}

.right {
    background-color: #2973af;
    flex: 3; /* 3/4 ratio within the parent element, as the other flex item in the parent is "flex: 1;" */
}

2. The right element cannot take 100% of the width, as it is together with the left div inside the flex parent and we assigned the width parameter as "flex: value" for both

CSS flex Property https://www.w3schools.com/cssref/css3_pr_flex.asp