Question

编辑：添加了弹性方向：列，但在初始代码中未填写。

当孩子有overflow:auto而父母有overflow:auto时，滚动条将出现在孩子上。

但是当从overflow:auto中删除parent时，滚动条将显示在grand-parent上。

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: "Roboto", sans-serif;
}

body {
  margin: 0;
  padding: 0;
}

.App {
  display: flex;
  height: 100%;
}

.grand-parent {
  display: flex;
  flex-direction: column;
  background: red;
  overflow: auto;
  padding: 20px;
}

.parent {
  display: flex;
  overflow: auto;
  padding: 20px;
  background: green;
}

.child {
  overflow: auto;
  font-size: 156px;
}

<div class="App">
  <div class="grand-parent">
    <div class="parent">
      <div class="child">
        Some content which grows bigger
      </div>
    </div>
  </div>
</div>

那是为什么？我仍然希望滚动条出现在孩子的身上。浏览器布局算法在这里如何工作？

编辑：

非常奇怪的是，该行为似乎取决于grand-parent具有flex-direction: column的行为。 flex-direction: row

可以正常运行

在Chrome 75，firefox 67上进行了测试

这似乎与祖父母上的flex-direction有关，如果flex-direction为row，则水平滚动显示此行为，如果flex-direction为column，则垂直滚动显示此行为

编辑：在进一步的实验中，如果我们在父级上设置min-height：0，则其行为符合预期，因此此问题可能类似于

https://moduscreate.com/blog/how-to-fix-overflow-issues-in-css-flex-layouts/

https://css-tricks.com/flexbox-truncated-text/

Answer 1

对于overflow-y，这是控制内容如何溢出父垂直边缘的CSS属性，默认值为visible。 Here is how it works：

内容不会被剪切，并且可能在填充框的顶部和底部边缘之外呈现。

这意味着，如果内容不适合该框，则某些内容将在该框外呈现。

该属性不是 inherited 。下面的CSS不会在ID为overflow的div子级上将auto属性parent设置为var parentElem = document.getElementById('parent'); var childElem = document.getElementById('child'); console.log('overflow-y property of parent element: ' + window.getComputedStyle(parentElem).overflowY) console.log('overflow-y property of child element: ' + window.getComputedStyle(childElem).overflowY)：

#parent {
    overflow: auto;
}

<div id="parent">
  <div id="child">
    Some content
  </div>
</div>

- (void)selectLine:(id)sender {
    NSString *string = [[self textView] text];
    NSRange range = [[self textView] selectedRange];
    NSRange newRange = [string lineRangeForRange:range];

    if ([[string substringWithRange:newRange] hasSuffix:@"\n"]) {
        newRange.length -= 1;
    }
    [[self textView] setSelectedRange:newRange];

    CGRect targetRect = [[self textView] firstRectForRange:[[self textView] selectedTextRange]];
    UIMenuController *menuController = [UIMenuController sharedMenuController];
    [menuController setTargetRect:targetRect inView:[self textView]];
    [menuController setMenuVisible:YES animated:YES];
}

这意味着当子框中的内容溢出时，浏览器会在父框上自动显示滚动条；您将需要根据需要在子节点上明确指定属性。

弯曲和溢出：奇怪的行为

1 个答案: