弹性盒项目的独立子元素答案

【问题标题】：isolated child element of flex box items弹性盒项目的独立子元素
【发布时间】：2021-08-09 11:16:59
【问题描述】：

CSS

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

.main {
  display: flex;
  width: 100vw;
  height: 100vh;
}

.nav {
  width: 200px;
  height: 100%;
  background-color: blue;
}

.content {
  flex: 1 1 auto;
  background: red;
}

.child-content {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.child-child-content {
  width: 2000px;
  height: 2000px;
}

HTML

<body>
  <div class="main">
    <div class="nav">
      Navigation
    </div>
    <div class="content">
      <div class="child-content">
        <div class="child-child-content">
          I want this is scrollable and don't break size of child-content. But it don't work.
        </div>
      </div>
    </div>
  </div>
</body>

我希望 child-child-item 元素是孤立的，不影响 child-item 的大小，并打破整体布局。

CodePen

我知道可以通过绝对位置来解决它，但我不知道这是否是解决我问题的最佳解决方案。

对不起我的英语水平。帮帮我，谢谢！

【问题讨论】：

在 flex 子节点上设置溢出怎么样？ codepen.io/anon/pen/EmKBmZ 。 position:absolute 也是一个很好的方法，它从流中移除元素并允许从它的位置调整它的大小：相对父
那么，绝对定位解决不了的问题是什么？
谢谢@GCyrillus，我只想尝试使用弹性盒子。现在，我添加工具栏。 codepen.io/anon/pen/ZKWdRp，我对弹性项目使用溢出，但它不起作用。帮助我。
这是一个新问题吗？我没有看到任何工具栏:)
codepen.io/anon/pen/ZKWdRp ，我使用嵌套弹性框添加工具栏面板，并继续隔离内容容器 div，我设置内容容器溢出（内容容器是一个弹性项目），但它是行不通的。 :(

标签： html css flexbox overflow

【解决方案1】：

使用绝对位置也很好。如果你发现了另一种方式，请传播它。

【讨论】：