flex-basis does not respect box-sizing: border-box

Fixed Issue #106816

Details

Created
Apr 27, 2014
Privacy
This issue is public.
Found in build #
0.0011
Reports
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce

URhttp://jsfiddle.net/Supuhstar/A68pq/2/](http://jsfiddle.[http://jsfiddle.net/Supuhstar/A68pq/2/](http://jsfiddle.net/Supuhstar/A68pq/2/)

URL:

Repro Steps:

==============

create a flex layout

set box-sizing: border-box; to the boxes in the flex layout

set the width of the boxes using flex-basis

apply padding or a border to the boxes

Example: http://jsfiddle.net/Supuhstar/A68pq/2/

Expected Results:

==============

Box is sized based on overall size (content + padding + border)

Actual Results:

==============

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Peter S.”

      Changed Steps to Reproduce

      Changed Steps to Reproduce

      Changed Assigned To from “Peter S.” to “Jianyong M.”

      Changed Steps to Reproduce

      Changed Status to “Confirmed”

      Changed Status from “Confirmed” to “In code review”

      Changed Status from “In code review” to “In progress”

      Changed Status from “In progress” to “In code review”

      Changed Status from “In code review” to “In progress”

      Changed Assigned To from “Jianyong M.” to “IPBS P.”

      Changed Status from “In progress” to “Fixed”

      Changed Assigned To from “IPBS P.” to “Rossen A.”

    • Are there any plans to fix this for IE11? This (along with many other IE11 flex bugs) is a real roadblock for adopting flex-based layouts, considering current usage.

    • Microsoft Edge Team

      Changed Steps to Reproduce

    You need to sign in to your Microsoft account to add a comment.

    Sign in