我有一个名为.side-el的div,我想在一个位置：固定;行为,但一旦我应用位置固定宽度从正确的一个替换.正确的宽度将是由flexBox设置的宽度.如何实现这一目标？
.container {
-webkit-align-content: flex-start;
align-content: flex-start;
-webkit-align-items: flex-start;
align-items: flex-start;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
justify-content: flex-start;
* {
Box-sizing: border-Box;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
}
.main-el {
Box-sizing: border-Box;
padding:0 2em;
width: 70%;
}
.side-el {
Box-sizing: border-Box;
width: 30%;
}
<div class="container" style="background-color: blue; height: 100px;">
<div class="main-el">
<div style="background-color: red; height: 1000px;">content</div>
</div>
<div class="side-el" >
<div style="background-color: red; height: 100px;">content</div>
</div>
</div>
解决方法
你不行
如CSS2.1 spec所述：
Absolutely positioned Boxes are taken out of the normal flow.
而Flexible Box Layout规格证实：
An absolutely-positioned child of a 07002 does not
participate in flex layout. However,it does participate in the
07003 (see 07004),which has an effect in their
painting order.
(重点是我)
