kraken
kraken copied to clipboard
容器的 width 由百分比的 width 的 child 撑开时计算不正确
重现代码 | Code example:
// @TODO: The width of parent with no width style is no determined by its child but its grand child?
xit("size 002", async () => {
let p_1;
let flexbox_1;
let rect;
let rect_1;
let rect_2;
let rect_3;
let rect_4;
let rect_5;
let rect_6;
let rect_7;
p_1 = createElement(
"p",
{
style: {
"box-sizing": "border-box",
},
},
[
createText(`auto flex-basis. However, as this is a width, we follow regular width
rules and resolve the percentage:`),
]
);
flexbox_1 = createElement(
"div",
{
class: "flexbox",
style: {
display: "flex",
border: "3px solid black",
"box-sizing": "border-box",
width: "300px",
},
},
[
createElement(
"div",
{
"data-expected-width": "50",
style: {
"box-sizing": "border-box",
},
},
[
createElement(
"div",
{
"data-expected-width": "25",
style: {
overflow: "hidden",
"box-sizing": "border-box",
width: "50%",
},
},
[
(rect_2 = createElement("div", {
class: "rect",
style: {
width: "50px",
height: "50px",
"background-color": "green",
"box-sizing": "border-box",
},
})),
]
),
]
),
(rect_3 = createElement("div", {
class: "rect flex-none",
style: {
"-webkit-flex": "none",
flex: "none",
width: "50px",
height: "50px",
"background-color": "green",
"box-sizing": "border-box",
},
})),
]
);
BODY.appendChild(p_1);
BODY.appendChild(flexbox_1);
await snapshot();
});
预期结果 | Expected results:
实际结果 | Actual results: