Question

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元素被隔离，不会影响子项目大小，并且会破坏整个布局。

CodePen

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

对不起我的英语技能。帮助我，谢谢！

Answer 1

使用绝对位置也不错。如果您找到其他方式，请传播。

弹性框项目的孤立子元素

1 个答案: