How to ignore a certain element when determining parent's size

Question

I have a div which is only as wide as its contents, but I\'m trying to make it so that a certain element is ignored when determining the div\'s size.

Answer 1

Add a big negative margin to the ignore element while setting the width.

#parent {
  background:red;
  padding:5px;
  display:inline-block;
}
#parent > div {
  height:20px;
  background:blue;
  margin-bottom:5px;
}

.ignore {
  margin-right:-500px;
  
  /*to illustrate*/
  animation:change 2s linear infinite alternate;
}

@keyframes change {
  from {width:10px;}
  to {width:100px;}
}

Or use only the negative margin to set the width. Note that the final width will be the sum of the biggest width inside the parent + the margin you set (not only the margin)

#parent {
  background:red;
  padding:5px;
  display:inline-block;
}
#parent > div {
  height:20px;
  background:blue;
  margin-bottom:5px;
}

.ignore {
  /*to illustrate*/
  animation:change 2s linear infinite alternate;
}

@keyframes change {
  from {margin-right:-10px;}
  to {margin-right:-100px;}
}