Bug 171430 - Buttons with zero width still affect parent's width
Summary: Buttons with zero width still affect parent's width
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 10
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2017-04-28 06:47 PDT by Cedric Reichenbach
Modified: 2022-07-15 11:16 PDT (History)
3 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Cedric Reichenbach 2017-04-28 06:47:46 PDT
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/
Comment 1 Brent Fulgham 2022-07-15 11:16:43 PDT
In Safari 15.5+ all buttons show zero width, and the 'parent' container has zero width.