html - 具有两个等高子项的 Flexbox 布局，其中一个包含带有滚动内容的嵌套 Flexbox

标签 html css flexbox overflow

我有一个 <img>右侧有一个面板，其中包含一个控件标题和一长串元素。所以我有一个嵌套的 flexbox 情况:

.container (flex)
 -> .child img
 -> .child controls panel (flex)
  -> .controls
  -> .content-wrapper scrolling list

在最基本的层面上，两个并排的面板很简单，是一个简单的 flex align-items: stretch .. https://codepen.io/neekfenwick/pen/MOxYxz

在那个基础层面上，这是一个重复的问题 How do I keep two divs that are side by side the same height? .

一旦右侧面板因垂直滚动列表而变得更加复杂，我就看不到如何设置其父级(第二个 .child)的高度。 , 匹配第一个 .child 的高度. https://codepen.io/neekfenwick/pen/XzGJGw 

+-------------+---------------+
|             |  Controls     |
| Left child  |               |
|             +---------------+
|             |              A|
|             | Vertically   |+
|             | scrolling    ||
|             | items        ||
|             |              |+
|             |              V|
+-------------+---------------+

我已阅读 Flexbox item with scrollable content但这解决了水平滚动问题，而不是像这样的垂直布局。还有 Nested flexbox with scrolling area处理垂直堆叠的嵌套 flexbox，我认为 row 的这种组合和 column方向混淆了我的情况。

作为代码片段:

.container {
  display: flex;
  align-items: stretch;
}

.child {
  border: 1px solid grey;
  background-color: lightgrey;
  flex: 1 1 auto;
}

.controls-panel {
  display: flex;
  flex-direction: column;
}

.controls {
  flex: 0 0 auto;
}

.content-wrapper {
  flex: 1 1 auto;
  width: 400px;
  overflow-y: auto;
}
.content-item {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
}
<div class="container">
  <div class="child">
    <p>In real life I am an inline img.</p>
    <p>I am some content whoop de doo.</p>
    <p>I am some content whoop de doo.</p>
    <p>I am some content whoop de doo.</p>
    <p>I want my sibling to equal my height.</p>
  </div>
  <div class="child controls-panel">
    <div class="controls">
      <p>Small controls area. Panel below should scroll vertically.</p>
    </div>
    <div class="content-wrapper">
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
    </div>
  </div>
</div>

我不想在这里固定任何元素的高度。碰巧的是，我知道 img 的高度，所以我可以使用 CSS 强制调整右侧元素的高度，但我想知道是否有解决此问题的“真正” flexbox 方法。

最佳答案

一般来说，要使 overflow: scroll(或 auto 和 hidden)起作用，需要以一种方式或other，否则元素通常会根据需要增长以适应其内容。

主要有 3 种方式，要么设置实际高度，就像在第一个示例中一样，我将它添加到 container。

堆栈片段 1

.container {
  display: flex;
  height: 100vh;
}

.child {
  border: 1px solid grey;
  background-color: lightgrey;
  flex: 1 1 auto;
}

.controls-panel {
  display: flex;
  flex-direction: column;
}

.controls {
  flex: 0 0 auto;
}

.content-wrapper {
  flex: 1 1 auto;
  width: 400px;
  overflow-y: auto;
}
.content-item {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
}
<div class="container">
  <div class="child">
    <p>In real life I am an inline img.</p>
    <p>I am some content whoop de doo.</p>
    <p>I am some content whoop de doo.</p>
    <p>I am some content whoop de doo.</p>
    <p>I want my sibling to equal my height.</p>
  </div>
  <div class="child controls-panel">
    <div class="controls">
      <p>Small controls area. Panel below should scroll vertically.</p>
    </div>
    <div class="content-wrapper">
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
    </div>
  </div>
</div>

或者使用绝对定位来创建高度约束，这是绝对元素所做的。

它只是通过一个额外的包装器 content-scroll 完成的，并将保持结构的其余部分完全动态。

堆栈片段 2

.container {
  display: flex;
}

.child {
  border: 1px solid grey;
  background-color: lightgrey;
  flex: 1 1 auto;
}

.controls-panel {
  display: flex;
  flex-direction: column;
}

.controls {
  flex: 0 0 auto;
}

.content-wrapper {
  position: relative;
  flex: 1 1 auto;
  width: 400px;
}
.content-scroll {
  position: absolute;
  top: 0; left: 0;
  right: 0; bottom: 0;
  overflow-y: auto;
}
.content-item {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
}
<div class="container">
  <div class="child">
    <p>In real life I am an inline img.</p>
    <p>I am some content whoop de doo.</p>
    <p>I am some content whoop de doo.</p>
    <p>I am some content whoop de doo.</p>
    <p>I want my sibling to equal my height.</p>
  </div>
  <div class="child controls-panel">
    <div class="controls">
      <p>Small controls area. Panel below should scroll vertically.</p>
    </div>
    <div class="content-wrapper">
      <div class="content-scroll">
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
      </div>
    </div>
  </div>
</div>

单独使用 Flexbox，认为它可能无法完全跨浏览器工作，尤其是对于旧版本，它仍然支持它但有很多错误。

原始代码中的简单修复是将 .content-wrapper 中的 flex: 1 1 auto; 更改为 flex: 1 1 0px;(我的 IE 版本需要 0px，Chrome/Firefox/Edge 可以使用 0)

堆栈片段 3

.container {
  display: flex;
}

.child {
  border: 1px solid grey;
  background-color: lightgrey;
  flex: 1 1 auto;
}

.controls-panel {
  display: flex;
  flex-direction: column;
}

.controls {
  flex: 0 0 auto;
}

.content-wrapper {
  flex: 1 1 0px;
  width: 400px;
  overflow-y: auto;
}
.content-item {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
}
<div class="container">
  <div class="child">
    <p>In real life I am an inline img.</p>
    <p>I am some content whoop de doo.</p>
    <p>I am some content whoop de doo.</p>
    <p>I am some content whoop de doo.</p>
    <p>I want my sibling to equal my height.</p>
  </div>
  <div class="child controls-panel">
    <div class="controls">
      <p>Small controls area. Panel below should scroll vertically.</p>
    </div>
    <div class="content-wrapper">
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
    </div>
  </div>
</div>

片段 2 和 3 也回答了你的问题

...with a vertically scrolling list, I cannot see how to make the height of its parent, the second .child, match the height of the first .child.

请注意，如果右列中的顶部元素可以比左列大，则底部元素需要一个最小高度，以防止它折叠成 0，例如

.content-wrapper {
  ...
  min-height: 200px;           /*  e.g. like this  */
}

关于html - 具有两个等高子项的 Flexbox 布局，其中一个包含带有滚动内容的嵌套 Flexbox，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47628082/

上一篇：html - 为什么有些网站在我检查标记时具有未分配给元素的样式？

下一篇：html - 如何在没有 block 级父项的情况下将文本居中放置在 anchor 内？

相关文章：

html - CSS Main Body 不会拉伸(stretch)到页面？

javascript - 如何使用 knockoutJS 设置悬停和焦点的 css 类

javascript - 如果单选按钮适合一行，如何设置不同的样式？

html - 如何给 flexbox 列元素内的 div 100% 高度？

javascript - 垂直导航中的子类别被隐藏且显示不正确

html - 同时定位一个 id 和一个类

javascript - jQuery 点击 div 外面应该隐藏 div，点击的子 div 不应该隐藏

javascript - 更改公共(public)变量 javascript 的值

html - 为什么我的伪表不使用 colspan 填充行？

html - 在顶部、中心和底部对齐元素不起作用

©2024 IT工具网  联系我们