如何计算 flexbox 容器的子元素的实际宽度？

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

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

Answer 2

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?