无法更改元素的宽度

Question

快速粗略的示例here。只需打开 CDT 和 select 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 的当前宽度。

通常您可以更改 "onion view" 中的 x 值，但在这种情况下，更改会立即恢复为 260px。

a 元素有三个子元素，两个是 display:none，另一个的宽度约为 60px，包括内边距。

那么，这是为什么呢？

"Onion view"

编辑：

由于使用 Chrome Devtools 时的 flex 设置，无法直接识别未应用宽度设置。

这个在FF里面比较好解决，看这里：

Answer 1

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

无法更改元素的宽度

Cannot change width of element

css

google-chrome

google-chrome-devtools