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

Question

我有这样的 html 和 css 代码。我有两个问题：

当window宽度为600px时，理论上左边框应该是150px宽度，因为它是parent(600px)的25%，但宽度是120px。
右边的盒子达不到100vw。它只需要 widthOfParent - widthOfLeft。我想它应该以某种方式溢出并达到 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

使用“弹性”属性而不是弹性项目的宽度

.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;" */
}

右边的元素不能占用 100% 的宽度，因为它与左边的 div 在 flex 父元素中，我们将宽度参数指定为“flex: value” 两个

CSS 弹性属性 https://www.w3schools.com/cssref/css3_pr_flex.asp

Answer 2

您正面临缩小效果。在所有情况下，总宽度 100vw + 25% 都大于 100%，因此两个项目将同等收缩。

由于您的容器也是全宽的，溢出将始终等于 25% 或 25vw。两个元素都有默认的收缩值 1 所以我们的总和等于 125vw.

第一个元素宽度将等于：25vw - (25vw * 25vw/125vw) = 20vw 第二项的宽度为：100vw - (25vw * 100vw/125vw) = 80vw

逻辑上可以看到总和是100vw（20vw + 80vw）当屏幕宽度等于600px时，20vw等于120px.

为避免这种情况，通过设置 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>

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

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

html

css

user-interface

frontend

flexbox