You are missing the height CSS property. Adding it you will notice that scroll bar will appear. .wrapper{ // width: 1000px; width:600px; overflow-y:scroll; position:relative; height: 300px; } JSFIDDLE From documentation: overflow-y The overflow-y CSS property specifies whether to clip content, render a scroll bar, or display overflow content of a block-level element, when it overflows … Read more
Add this to your code: .child { width: 100%; } We know that a block-level child is supposed to occupy the full width of the parent. Chrome understands this. IE11, for whatever reason, wants an explicit request. Using flex-basis: 100% or flex: 1 also works. .parent { display: flex; flex-direction: column; width: 400px; border: 1px … Read more
Instead of: input:not(disabled)not:[type=”submit”]:focus {} Use: input:not([disabled]):not([type=”submit”]):focus {} disabled is an attribute so it needs the brackets, and you seem to have mixed up/missing colons and parentheses on the :not() selector. Demo: http://jsfiddle.net/HSKPx/ One thing to note: I may be wrong, but I don’t think disabled inputs can normally receive focus, so that part may be … Read more
Generically, you can use a custom font using @font-face in your CSS. Here’s a very basic example: @font-face { font-family: ‘YourFontName’; /*a name to be used later*/ src: url(‘http://domain.example/fonts/font.ttf’); /*URL to font*/ } Then, trivially, to use the font on a specific element: .classname { font-family: ‘YourFontName’; } (.classname is your selector). Note that certain … Read more
Short answer The device pixel ratio is the ratio between physical pixels and logical pixels. For instance, the iPhone 4 and iPhone 4S report a device pixel ratio of 2, because the physical linear resolution is double the logical linear resolution. Physical resolution: 960 x 640 Logical resolution: 480 x 320 The formula is: Where: … Read more
It shouldn’t have any discernible effects on performance. Seeing Firefox’s CSS parser at /source/layout/style/nsCSSDataBlock.cpp#572 and I think that is the relevant routine, handling overwriting of CSS rules. It just seems to be a simple check for “important”. if (aIsImportant) { if (!HasImportantBit(aPropID)) changed = PR_TRUE; SetImportantBit(aPropID); } else { // … } Also, comments at … Read more
You can specify multiple animations–each with their own properties–with a comma. Example: animation: rotate 1s, spin 3s;
I had to set a fake height to the <tr> and height: inherit for <td>s tr has height: 1px (it’s ignored anyway) Then set the td height: inherit Then set the div to height: 100% This worked for me in IE edge and Chrome: <table style=”width:200px;”> <tr style=”height: 1px;”> <td style=”height: inherit; border: 1px solid … Read more
For me simply adding min-width: 0; to the overflowing div prevented the overflow: article { min-width: 0; } Explanation: min-width in a flex context: While the default min-width value is 0 (zero), for flex items it is auto. This can make block elements take up much more space than desired, resulting in overflow. min-width is … Read more
Try something like this. This should center any huge element in the middle vertically and horizontally with respect to its parent no matter both of their sizes. .parent { position: relative; overflow: hidden; //optionally set height and width, it will depend on the rest of the styling used } .child { position: absolute; top: -9999px; … Read more