时间戳

首页 > 解决方案 > CSS flex：防止孙子溢出（即强制滚动）

css - CSS flex：防止孙子溢出（即强制滚动）

问题描述

鉴于以下情况：

<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, not main, nor.wrapper上。没有硬编码值。

我尝试了以下 CSS，但失败了。如果我试图滚动它会起作用.wrapper，但我试图滚动它的孩子。

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

标签： cssflexbox

解决方案

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。

弹性项目，默认情况下，有min-height: auto. 这意味着弹性项目不能小于其内容的大小。

要覆盖它，你需要设置min-height: 0你的弹性项目，在这种情况下.wrapper。这将导致.wrapper直到屏幕结束。

但是，该ul元素将继续增加。为了防止这种情况，在不使用固定单位的情况下，您还需要将其转换.wrapper为列导向的弹性框。

// 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>

推荐阅读