css - table-cell width gets larger as width property gets smaller -


i have following code:

<div style="display: table; border: 1px solid green;">     <div style="display: table-cell; width: 1%; max-width: 1000px; background: red; height: 30px;"></div> </div> 

changing width property has counter-intuitive consequences.

a bigger example of behavior: http://jsfiddle.net/8dufr/2/. how width of red rectangle calculated?

you using width: percentage%; in wrong div. put in parent div each red bar. fixed jsfiddle.

http://jsfiddle.net/8dufr/4/

<h3>1%</h3> <div style="display: table; border: 1px solid green; width: 1%"> <div style="display: table-cell; max-width: 1000px; background: red; height: 30px;"></div> </div> 

Comments

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -