Setting div width as % with min-width is not working. Min-width always wins.

Question

I am having an issue with my width: 20%; being overridden by my min-width: 30px; (see lines 22 and 23 in the css box: http://jsfiddle.net/dLmnX/)

I am also using aspect ratio for the first time: I have picked up and chopped about the code from http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio.

The aspect ratio part of the code:

  #aspect {
      padding-top: 120%; /* aspect ratio */
  }

seems to be working fine, it is just the width in this div:

  #shuffle1 {
    display: inline-block;
    margin: 0px auto;
    position: relative;
    width: 20%;
    min-width: 30px;        
  }

Any help would be great! Thank you.

Answer 1

The culprit is the styling for the #two element.

http://jsfiddle.net/dLmnX/2/

  #two {
    display: inline-block;
  }

When you specify width as a percentage, it is relative to the size of the parent element. Because #two was very small, there was no way that 20% would ever be larger than 30px. Elements set to inline-block will try to take up as little space as possible.