border-box

flex-box box-sizing: border-box not working [duplicate]

由 你。 提交于 2019-12-12 18:06:05
问题 This question already has answers here : Why does box-sizing: border-box still show the border with a width of 0px? (2 answers) Closed 2 years ago . As title says: .cnr{ display: flex; height: 100%; background-color: grey; position: absolute; border: 1px red solid; } .cnr > div{ box-sizing: border-box; padding: 1em; border: 1em solid; overflow: hidden; } .cnr > .closed{ width: 0; flex-basis: 0; flex-shrink: 1; flex-grow: 0; min-width: 0; min-height: 0; } <div class="cnr"> <div> open </div>

border-box with padding can't have 0 width

由 谁都会走 提交于 2019-12-11 10:09:40
问题 Consider this code div { box-sizing: border-box; width: 0; height: 0; max-width: 0; max-height: 0; border: 1px solid gray; padding: 12px; overflow: hidden; } <div>Hi</div> According to everything I've ever read, understood, and used about box-sizing: border-box; This should show nothing since the width and height are zero and padding/border are inside of the zero width and height. What we see however is a 26x26 box ((12 padding + 1 border)*2). What gives? Why is border-box not working here?

CSS: how to set the width of form control so they all have the same width?

由 橙三吉。 提交于 2019-12-08 20:29:38
问题 Consider the following example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style type="text/css"> div { width: 15em } input, textarea, select { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box } </style> </head> <body> <form> <div>

Nested divs producing a scrollbar. Why?

由 北战南征 提交于 2019-12-07 05:38:26
问题 I have 3 nested divs: <div class="outer"> <div class="inner"><div class="item"></div></div> </div> The .inner div is position absolute and they each have 1px border: .outer{ width:50%; height:100px; border: 1px solid red; position:relative; overflow-x:hidden; box-sizing:border-box; } .inner{ border:1px solid blue; height:100%; position: absolute; box-sizing: border-box; } .item{ width:100px; height:100%; background-color:yellow; display: inline-block; border:1px solid green; box-sizing:border

Nested divs producing a scrollbar. Why?

由 ∥☆過路亽．° 提交于 2019-12-05 09:42:38
I have 3 nested divs: <div class="outer"> <div class="inner"><div class="item"></div></div> </div> The .inner div is position absolute and they each have 1px border: .outer{ width:50%; height:100px; border: 1px solid red; position:relative; overflow-x:hidden; box-sizing:border-box; } .inner{ border:1px solid blue; height:100%; position: absolute; box-sizing: border-box; } .item{ width:100px; height:100%; background-color:yellow; display: inline-block; border:1px solid green; box-sizing:border-box; } This arrangement results in a scrollbar on the .outer div. Here's a codepen Why is this and

Issue with box-sizing border-box and min-width in IE 9

由 半世苍凉 提交于 2019-12-04 17:50:44
问题 I'm using the box-sizing:border-box model. When an inline-block element with a min-width is contained in an inline-block element (container), the container is too wide in Internet Explorer 9. Works as expected in FF 10.0, Chrome 17.0, Opera 11.5 and Safari 5.1.2. See this jsfiddle By the way, width instead of min-width works like a charm. Any ideas? 回答1: Hi came across your post when Googling for a similar issue with IE 8, although IE 8 supports box-sizing and min-height/width, from my tests,

What causes the “user agent stylesheet” to use “border-box” instead of “content-box” for box-sizing?

由 守給你的承諾、 提交于 2019-12-04 10:15:10
问题 I'm under the impression that the user agent stylesheet in browsers such as Safari, Chrome and Firefox is something that is internal to the browser and can't be directly modified (rather a style property needs to be overridden). I'm also under the impression due to various websites including Mozilla's that the default value of the box-sizing property for Webkit and Mozilla is "content-box." I tested this on a rather simple dummy page viewed in various browsers. My problem is that on two pages

What causes the “user agent stylesheet” to use “border-box” instead of “content-box” for box-sizing?

由 限于喜欢 提交于 2019-12-03 04:27:12
I'm under the impression that the user agent stylesheet in browsers such as Safari, Chrome and Firefox is something that is internal to the browser and can't be directly modified (rather a style property needs to be overridden). I'm also under the impression due to various websites including Mozilla's that the default value of the box-sizing property for Webkit and Mozilla is "content-box." I tested this on a rather simple dummy page viewed in various browsers. My problem is that on two pages in our production application the default property is different, and we can't figure out why this is.

Chrome vs. box-sizing:border-box in a display:table

由 ∥☆過路亽．° 提交于 2019-11-29 14:22:05
I'm doing a small 2-pane layout using display:table . For spacing (also from the background image), I use padding . As I need the children to have an exact width:50% from the available space (taking regard for the padding of the parent div ), I use box-sizing:border-box . This works fine in Opera, but in Chrome the box-sizing:border-box or even -webkit-box-sizing:border-box is silently ignored. I made a demo which shows the issue. The two red boxes should be square and the blue box should be 200px in width and height: http://jsfiddle.net/fabb/JKECK/ Here's the html source: <div id="table">

* { Box-sizing: border-box; } : To border-box or not to border-box all elements?

由 限于喜欢 提交于 2019-11-29 04:16:33
I will start developing a new website, and I'm getting ready to deal with the different methods browsers use to calculate width and height of elements ( box model stuff ). Somehow, it came to my mind: what if I just apply box-sizing to all elements in the website? I'm one of those who believe that box-sizing: border-box; is one of the best commands there is in CSS, with all its limitations. However, those same limitations are the ones who make me wonder if I should apply box-sizing to all elements: * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box
订阅 border-box