calc无法计算父div的宽度？

Question

 body{width:400px;}
.bd{ padding:0 50px 0 80px; height:100px; }
.middle{ float:left; width:100%; height:80px;background:blue; }
.left{ float:left; width:180px; height:80px;background:#0c9;margin-left:-320px;}

<div class="bd">
  <div class="middle">middle</div>
  <div class="left">left</div>
</div>

bd1的100％宽度为(400-50-80)=270px，270+50=320px，因此为 -calc(100% + 50px)=-320px。
为什么margin-left:-320px;无法更改为margin-left:-calc(100% + 50px);？

Answer 1

Css不允许语法margin-left: -calc(100% + 50px);。请改用margin-left: calc(-100% - 50px);。

Answer 2

使用：

 margin-left:calc(-100% - 50px);

 body{
    width:400px;
}
.bd1{ 
    padding:0 50px 0 80px;
    height:100px; 
 }
.middle1{ 
    float:left; 
    width:100%;
     height:80px;
     background:blue; 
 }
.left1{ float:left;
 width:180px; 
 height:80px;
 background:#0c9;
 margin-left:calc(-100% - 50px);
}

<div class="bd1">
  <div class="middle1">middle</div>
  <div class="left1">left</div>
</div>