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

In case you only want one of the divs to have the desired result and want the div with .ignore class to be of a higher width. You may use the below code.

HTML

  
Ignore
  
Normal
  

CSS

#parent {
 background:red;
 padding:10px;
 overflow:visible;
 max-width:60px;
 }

#parent > div {
  height:20px;
  background:blue;
  margin-bottom:10px;
}

.ignore {
  width:100px;
 }

I have used the overflow:visible property and set it's max-width of 60px (which s the width of all our divs without the .ignore class.) to the parent element, and given the div with .ignore class the width of my choice.

Here is the codepen link: https://codepen.io/anon/pen/NmoVxw

Hope this helps. Thank you