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 >
        <div ></div>
        <div ></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

CodePudding user response：

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

CodePudding user response：

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 >
  <div ></div>
  <div ></div>
</div>

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