Resolve the scrolling failure of inner elements in multi-layer Flex layouts

The problem

For example, to achieve the effect:

Instead, it looks like this:

HTML structure

<div class="root">
  <div class="box">
    <div class="left">On the left side of the layout</div>
    <div class="right">On the right side of the layout<div class="scorll-box">
        <div class="scorll-content">Scroll the content</div>
      </div>
    </div>
  </div>
</div>
Copy the code

style

.root {
  display: flex;
  width: 400px;
  height: 400px;
  border: 1px solid # 000;
  overflow: auto;
}
.box {
  flex: 1;
  display: flex;
}
.left {
  width: 150px;
  height: 100%;
  background: pink;
}
.right {
  flex: 1;
  height: 100%;
  background: #0cc;
  overflow: auto;
}
.scorll-box {
  width: 100%;
  overflow: auto;
}
.scorll-content {
  width: 1000px;
  height: 200px;
  background: linear-gradient(90deg, grey, red);
}
Copy the code

Analysis of the

Code visually

  • Root is a Flex element with a fixed width
  • Box is a Flex element that fully ADAPTS to the parent. Root size
  • .left is the child element inside the.box that has a fixed width
  • .right is a Flex element that fully ADAPTS to its parent. Box size and allows scrolling
  • Scorll-box is a scrolling element box with a width matching the parent. Right size

To solve

After debugging found, flex: 1 overflow the parent size, need to increase the overflow here overflow: hidden | auto | scorll.

.box {
  overflow: hidden; / * + + + * /
}
Copy the code

Permissible effect: