CSS flex : prevent overflow of grandchild (i. e.，强制滚动)

Question

鉴于以下情况:

<main>
  <h1>Hello World</h1>
  <nav><button>Home</button> - <button>Contact</button> - <button>About</button></nav>
  <br>
  <div class=wrapper>
    <b>List header</b>
    <ul></ul>
  </div>
</main>

如何强制 ul 滚动，并且不溢出 main 或 .wrapper？即，滚动条应该出现在 ul 中，而不是 main 或 .wrapper 中。没有硬编码值。

我尝试了以下 CSS 但它失败了。如果我试图滚动 .wrapper，它会工作，但我正在尝试滚动它的 child 。

main {
  display: flex;
  flex-direction: column;
  max-height: 100vh;
}
.wrapper {
  flex: 1;
}
ul {
  overflow: auto; /* How to force this to scroll? */
}

代码笔:https://codepen.io/mustafa0x/pen/oNLXyxm

Answer 1

默认情况下，

block 元素会在允许的范围内增长。这就是您的 ul 元素不显示任何条形的原因。

尝试设置一个高度，例如 height: 150px，您会看到一些滚动条。

// Lorem ipsum
const $ = q => document.querySelector(q);
const url = 'https://baconipsum.com/api/?type=all-meat&sentences=100';
fetch(url).then(r => r.json()).then(data => {
   $('ul').innerHTML = data[0].split('. ').map(l => '<li>' + l).join('\n');
});

main {
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  
  /* Styling */
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}
.wrapper {
  flex: 1;
}
ul {
  overflow: auto; /* How to force this to scroll? */
  height: 150px;
  /* Styling */
  text-align: left;
}

<main>
  <h1>Hello World</h1>
  <nav><button>Home</button> - <button>Contact</button> - <button>About</button></nav>
  <br>
  <div class=wrapper>
    <b>List header</b>
    <ul></ul>
  </div>
</main>

既然不允许使用固定值，也不允许修改HTML，那么只能引入另一种flex。

默认情况下， flex 元素具有 min-height: auto。这意味着 flex 元素不能小于其内容的大小。

要覆盖它，您需要在 flex 元素上设置 min-height: 0，在本例中为 .wrapper。这将导致 .wrapper 到达屏幕末尾。

但是，ul 元素仍然会继续增加。为防止出现这种情况，在不使用固定单位的情况下，您还需要将 .wrapper 转换为列向 flexbox。

// Lorem ipsum
const $ = q => document.querySelector(q);
const url = 'https://baconipsum.com/api/?type=all-meat&sentences=100';
fetch(url).then(r => r.json()).then(data => {
   $('ul').innerHTML = data[0].split('. ').map(l => '<li>' + l).join('\n');
});

main {
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}
.wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
ul {
  overflow: auto; /* How to force this to scroll? */
  text-align: left;
}

<main>
  <h1>Hello World</h1>
  <nav><button>Home</button> - <button>Contact</button> - <button>About</button></nav>
  <br>
  <div class=wrapper>
    <b>List header</b>
    <ul></ul>
  </div>
</main>