如果可用空间，请添加水平边距

Question

我想添加40px的左边距，如果可用空间。如果没有足够的父宽度，让我们减少它。

示例：如果父级只有420px宽，则边距应减少到20px。

怎么做？

* {margin: 0; padding: 0;}
#parent {resize: both; border: 2px solid; overflow:auto; width: 500px; }
#margin { display: inline-block; background-color: blue; width: 40px; }
#main { display: inline-block; background-color: red; width: 400px; }

<div id="parent">
<div id="margin">&nbsp;</div>
<div id="main">&nbsp;</div>
</div>

Answer 1

您可以使用media queries。

@media screen and (max-width: 420px) {
  #margin { width: 20px }
}

https://jsfiddle.net/0evabfLa/

这是上面代码的动画，当边距改变时将背景更改为黄色。

Answer 2

这是一个带有演示案例的flexbox解决方案：http://codepen.io/anon/pen/
相关的CSS是：

.parent {
  display: flex;
}
.margin {
  min-width: 0; /* Necessary under 400px */
  max-width: 40px;
  flex: 1 0 0;
}
.main {
  width: 400px;
}

允许保证金增长到40px但也必须设置为0（弹性收缩永远不会降到0我认为最小宽度默认值是......自动，而不是0）

Answer 3

我终于使用calc(...)和max-width找到了解决方案。

#parent {resize: both; border: 2px solid; overflow:auto; width: 500px; }
#margin { max-width: 40px; width: calc(100% - 404px); display: inline-block; }
#main { background-color: red; width: 400px; display: inline-block; }

<div id="parent">
<div id="margin">&nbsp;</div>
<div id="main">&nbsp;</div>
</div>