Html 忽略最大宽度的像素宽度：100%

我在使用祖辈flex定位容器的元素中工作时遇到了

width

和

max width

之间的问题

当我在这个元素中使用

width

时，如果宽度大于其父元素，它只会忽略

max width:100%

。但是，例如，如果我使用

width:150%

，那么

max width:100%

就起作用了

正文{
宽度：640px；
高度：360px；
位置：相对位置；
}
身体：以前{
内容：“；
宽度：100%；
身高：100%；
框大小：边框框；
位置：绝对位置；
边框：2件纯黑；
}
正文：之后{
内容：“16:9屏幕大小比例示例”；
位置：绝对位置；
底部：0；
右：10px；
}
#柔性容器{
宽度：100%；
身高：100%；
显示器：flex；
flex-flow：行nowrap；
背景色：#95a5a6；
}
#边栏{
最小宽度：150px；
flex:01150px；
背景色：#7f8c8d；
}
#主要内容{
宽度：100%；
flex:1自动；
背景色：白色；
}
.第页{
宽度：100%；
填充：16px；
框大小：边框框；
}
.电网{
宽度：800px；
最大宽度：100%；
高度：200px；
背景色：红色；
颜色：白色；
填充：16px；
框大小：边框框；
}

边栏
内容页
以单位为单位并基于设备定义的具有一定宽度的网格。指定的宽度不应超过其父宽度（最大宽度：100%）。




应该这样做：


640px宽度的父级
800px宽度，最大宽度：100%

您的容器（

主体

）是

宽度：640px

主体

（柔性容器）的子项是

宽度：100%

。换句话说，640px

您的左侧弹性项（

#侧边栏

）是

最小宽度：150px

。为了参数起见：

宽度：150px

您的右侧弹性项（

#主要内容

）为

宽度：100%

。计算到：531.989px（原因待定）

#main content

（

.page

）的子项是

宽度：100%

。另外，531.989px

.page

（

.grid

）的子项是

宽度：500px

。这非常适合父级，并留有额外的空间（31.989px）

您的

最大宽度：100%

从未看到任何动作。它有效，只是不需要它

在第二个示例中，您将

width:800px

应用于

.grid

等效项，该等效项大于531.989px，因此

max width:100%

被调用

---

弹性物品最小尺寸

请注意，默认情况下，flex项不会收缩超过其内容的大小

将

最小宽度：0

添加到

#主要内容

说明：


语法错误

还请注意，您的

。。。。而且

正在造成重大问题

最大宽度始终优于宽度。不确定你的问题是什么。@Paulie\u应该回答它。这就是问题所在，在我的示例中，
max width
不超过
width
。看一看JSFIDLE。我将代码段的
.grid
宽度设置为800px，它仍然超出
最大宽度
规则。关于
#主要内容
宽度，我如何给它正确的父级剩余宽度？（动态地，代码段维度只是一个示例）与其设置
宽度
，不如给出
#主要内容
a
flex:1
。这将告诉它消耗线路上剩余的空间。@Michael_B救命；）
.grid {
  width: 500px; // For some reason this ignores max-width when is defined in units.
  max-width: 100%;
  height: 200px;
  background-color: red;
  color: white;
  padding: 16px;
  box-sizing: border-box;
}

#sidebar{
  min-width:150px;
  flex(0, 1, 150px);
  background-color: #7f8c8d;
}
#main-content{
  width:100%;
  flex(1, 1, auto);
  background-color: white;
}