我有一个名为.side-el的div,我希望它的位置是:Fixed;Behavior,但是一旦我应用了位置固定,宽度就会从右边交替.正确的宽度将是由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条所解释的那样:

绝对位置的盒子是taken out of the normal flow个.

Flexible Box Layout规格确认:

一个flex container岁的子元素.然而,它确实参与了

(我的重点)

Css相关问答推荐

如何将放射梯度css的大小定义为百分比?

Tailwind仅在启用时才在按钮上设置group-hover

如何将CSS Paint API与Reaction一起使用

NextJs - Tailwind css类样式未应用于响应屏幕

如何在不重叠侧边栏的情况下尽可能使元素居中?

如何为多个背景和棋盘设置不同的大小

如何让 v-col 变成可滚动的?

CSS Select 标签旁边的文本并输入

Vue3 组合 api 中的对象值样式

使用 place-content: center 的全宽 CSS 网格项目

普通流,流布局,块和内联布局有什么区别?

CSS Stepper - LI After Overlaying LI Before

Rails 7引擎如何使未编译的样式表可用于托管应用程序?

在所有移动设备中禁用滚动

CSS 中的区域类似于 C# 区域?

将一行文本保留为单行 - 换行或不换行

HTML 元素默认为 display:inline-block?

在 Twitter Bootstrap 中创建圆角的正确方法

在 CSS 中表示 100% 的 1/3 的最佳方式是什么?

如何知道哪个 HTML 元素导致了垂直滚动条