18.9.24日报，修复两处flex box的显示问题

1，https://github.com/weolar/miniblink49/issues/167 https://github.com/weolar/miniblink49/issues/169

修复了这两处flex box和新版chrome显示不一样的问题。第一个问题我更新了整个LayoutFlexibleBox，第二个问题，

只要更新 LayoutBox::computePercentageLogicalHeight这个函数，在里面加入

    LayoutUnit stretchedFlexHeight(-1);
    if (isFlexItem(*cb))
        stretchedFlexHeight = toLayoutFlexibleBox(cb->parent())->childLogicalHeightForPercentageResolution(*cb);

即可。

测试代码：

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8" />
<title>Centered layout example-Vuetify.js</title>

-----

* {
margin: 0px;
padding: 0px;
}

.application--wrap {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 100vh;
max-width: 100%;
position: relative;
}

.v-content {
transition: none;
display: flex;
flex: 1 0 auto;
max-width: 100%;
}

.container.fill-height {
align-items: center;
display: flex;
}

.fill-height {
height: 100%;
}

.container {
flex: 1 1 100%;
margin: auto;
padding: 0px;
width: 100%;
}

.v-content__wrap {
flex: 1 1 auto;
max-width: 100%;
position: relative;
}

原因是.fill-height {
height: 100%;
}

这里老版chrome没考虑如果flex item是Percentage的情况。

以后有时间再看下chrome当时的patch是怎么回事

18.9.24日报，修复两处flex box的显示问题

猜你喜欢