无法更改元素的宽度

Question

简单又肮脏的示例here。 只需打开CDT并选择a-标签即可。

.collapsible-header {
  font-weight: normal;
  color: rgba(0, 0, 0, 0.87);
  font-size: 13px;
  font-family: "Poppins", sans-serif;
  -webkit-box-direction: normal;
  direction: inherit;
  visibility: visible;
  list-style-type: none;
  box-sizing: inherit;
  display: flex;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background-color: transparent;
  border: none;
  line-height: inherit;
  height: 48px;
  padding: 0px;
}

a {
  font-family: "Poppins", sans-serif;
  direction: inherit;
  visibility: visible;
  list-style-type: none;
  line-height: inherit;
  box-sizing: inherit;
  background-color: transparent;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
  z-index: 1;
  color: #757575;
  font-size: 1.0769rem;
  font-weight: 500;
  -webkit-box-flex: 1;
  flex: 1;
  height: 48px;
  padding-left: 16px;
  padding-right: 16px;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -webkit-box-align: center;
  align-items: center;
  width: 0px !important;
  transition: all 0.2s ease-out;
  display: block;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="collapsible-header" tabindex="0">
  <a class="waves-effect waves-blue">
    <i class="material-icons">folder_special</i>
    <span>Layouts</span>
    <i class="material-icons right opener" style="margin-right:0;">arrow_drop_down</i>
  </a>
</div>

---

我有一个块级元素a和display:block。 在CSS中，我将width设置为0px，但不会更改宽度。

在第一张图片中，您可以看到它已正确应用，但是洋葱视图仍然显示260px，实际上这是a的当前宽度。

通常，您可以在“洋葱视图”中更改x的值，但是在这种情况下，更改会立即恢复为260px。

a元素有三个子元素，两个元素是display:none，另一个元素的宽度约为60像素（包括填充）。

那为什么呢？

“洋葱视图”

---

编辑：

由于使用flex设置时，使用Chrome Devtools不能正确应用宽度设置。

这在FF中可以更好地解决，请看这里：

Answer 1

父元素具有display: flex，因此可以扩展您正在查看的元素。这是弹性布局的固有行为。您可以通过在子元素上指定flex: 0 CSS（在这种情况下为<a>）来防止这种情况。