以像素為單位的寬度，忽略最大寬度：100％

Question

我在使用祖父母伸縮容器定位的元素中工作width和max-width之間存在問題。

當我使用width與像素max-width: 100%在此元素，如果寬度比其母公司大，它只是忽略了max-width: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 ）的width: 640px 。

body的孩子（ #flex-container ）的width: 100%是width: 100% 。 換句話說，為640像素。

您的左側flex項目（ #sidebar ）的min-width: 150px 。 出於參數考慮： width: 150px 。

您右側的flex項目（ #main-content ）的width: 100% 。 計算得出：531.989px（原因待定）。

#main-content （ .page ）的子.page的width: 100% 。 另外，531.989px

的孩子.page （ .grid ）是width: 500px 。 這非常適合父級，剩余了多余的空間（31.989px）。

您的max-width: 100%從不執行任何操作。 它有效，只是沒有被要求。

在第二個示例中，對.grid等效項應用width: 800px ，該值大於531.989px，因此max-width: 100%被調用。

---

伸縮物品的最小尺寸

請注意，默認情況下，彈性項目不會縮小其內容的大小。

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

說明： 為什么彈性項目不能縮小到內容大小以上？

---

語法錯誤

另請注意，您的行注釋語法 ...

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

...以及關於flex屬性的括號 ...

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

造成重大問題。

修訂的小提琴