Question

我在理解其工作原理时遇到了一些问题。使用box-sizing：border-box我假设填充包含在元素宽度中。因此，当我设置max-width：0px时，我应该将包含填充的元素宽度设置为0.

现在我有这种情况，我希望通过设置max-width隐藏一些联系信息。但是，当我向隐藏的跨度添加填充时，元素的宽度为0 +填充。

这是预期的行为吗？这个flex-box是否相关？是溢出：隐藏只应用于内容，尽管框大小？我想问题本身很容易通过在动作单中添加另一个节点来修复，但我真的很好奇为什么会这样。

＆＃13;

* {
    margin: 0;
    padding: 0;
    outline: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.action-icon-wrapper {
  display: flex;
  display: -webkit-flex;
}

.action-slip {
  height: 2rem;
  line-height: 2rem;
  max-width: 0px;
  overflow: hidden;
  color: white;
  padding-left: 1rem;
}
.green {
  background-color: green;
}
.red {
  background-color: red;
}

.action-icon {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  color: @white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="action-icon-wrapper">
  <span class="action-slip green">contact</span>
  <span class="action-icon red">C</span>
</div>

＆＃13;

box-sizing border-box在填充

0 个答案: