Bug 171430 – Buttons with zero width still affect parent's width

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Cedric Reichenbach]

When setting `width: 0` on buttons in a container with variable with, they still occupy space (but are invisible). As a consequence, the container element has the same with as if those buttons had default width.

Example:

HTML:

<div class="parent">
  <button class="child">a</button>
  <button class="child">b</button>
  <button class="child">c</button>
</div>


CSS:

.parent {
  float: left;
  border: 2px solid darkblue;
}

.child {
  float: left;
  width: 0px;
  padding: 0;
  margin: 0;
  border: none;
  overflow: hidden;
}

.parent:hover .child {
  width: auto;
}


The a sample in JSFiddle can be found here: https://jsfiddle.net/4rsd84yg/9/

[Brent Fulgham]

In Safari 15.5+ all buttons show zero width, and the 'parent' container has zero width.