html - 宽度(以像素为单位)忽略最大宽度 :100%

Question

我在使用祖级 Flex 定位容器的元素中工作时遇到 width 和 max-width 之间的问题。

当我在此元素中使用width(以像素为单位)和max-width: 100%时，如果宽度大于其父级，它只会忽略max -宽度:100%。但如果我使用 width: 150% 那么 max-width:100% 就会起作用。

body{
  width: 640px;
  height: 360px;
  position: relative;
}
body:before{
  content:"";
  width:100%;
  height:100%;
  box-sizing: border-box;
  position: absolute;
  border: 2px solid black;
}
body:after{
  content:"16:9 screen size ratio example";
  position: absolute;
  bottom: 0;
  right: 10px;
}
#flex-container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
  background-color: #95a5a6;
}
#sidebar{
  min-width:150px;
  flex: 0 1 150px;
  background-color: #7f8c8d;
}
#main-content{
  width:100%;
  flex: 1 1 auto;
  background-color: white;
}
.page{
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
}
.grid{
  width: 800px;
  max-width: 100%;
  height: 200px;
  background-color: red;
  color: white;
  padding: 16px;
  box-sizing: border-box;
}

<div id="flex-container">
  <div id="sidebar"><h2>Sidebar</h2></div>
  <div id="main-content">
    <div class="page">
      <h1>Content page</h1>
      <div class="grid">
        A grid with certain width defined in units and based on the device. Specified width should not exceed its parent width (max-width: 100%).
      </div>
    </div>
  </div>
</div>


<br><br><br>


Should work like this:
<br>
<div style="width:640px;height:360px; border: 2px solid black;background-color:white;">
  <div style="width:100%;height:100%;">
    640px width parent
    <div style="max-width:100%; width:800px; height:100px; background-color:green;color:white;">
      800px width with max-width:100%
    </div>
  </div>
</div>

这是JSFiddle .

Answer 1

您的容器(body)是宽度:640px。

body 的子元素(#flex-container)是 width: 100%。换句话说，640px。

您的左侧 flex 元素 (#sidebar) 为 min-width: 150px。为了论证:宽度:150px。

您的右侧 flex 元素 (#main-content) 为 宽度:100%。计算为:531.989px(原因待定)。

#main-content (.page) 的子元素是 width: 100%。另外，531.989px

.page (.grid) 的子元素是 width: 500px。这非常适合父级，并留有额外的空间(31.989px)。

您的 max-width: 100% 从未看到任何操作。它有效，只是没有被调用。

在第二个示例中，您将 width: 800px 应用于 .grid 等效项，该值大于 531.989px，因此 max-width: 100% 被采取行动。

---

Flex 元素最小尺寸

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

将 min-width: 0 添加到 #main-content。

说明:Why doesn't flex item shrink past content size?

---

语法错误

另请注意，您的 line commenting syntax ...

.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;
}

...和parenthesis around the flex property ...

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

造成了严重的问题。

Revised Fiddle