我怎么能有一个位置：固定; flexbox大小的元素的行为？ [英] How can I have a position: fixed; behaviour for a flexbox sized element?

问题描述

我有一个div叫.side-el，我想在一个位置：fixed;行为，但是一旦我应用位置固定的宽度交替从右边。正确的宽度将是由flexbox设置的宽度。如何实现此目标？

I have a div called .side-el which I would like to have in a position: fixed; behavior, but as soon as I apply position fixed the width alternates from the right one. The right width would be the one set by flexbox. How can I achieve this goal?

.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规格：

绝对定位的方块是正常流程。

而弹性框布局规格确认：

的 flex容器 不
参与flex布局。但是，它确实参与了
重新排序步骤（请参阅订单），它们在
绘画顺序中有效。 / p>

An absolutely-positioned child of a flex container does not participate in flex layout. However, it does participate in the reordering step (see order), which has an effect in their painting order.

^{（强调我）}

这篇关于我怎么能有一个位置：固定; flexbox大小的元素的行为？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！