那些遇到过的问题

具有两个相等高度子项的Flexbox布局,一个包含具有滚动内容的嵌套Flexbox

Nee*_*eek 2 html css overflow css3 flexbox

我有一个<img>右边的面板,其中包含一个控件标题和一长串项目.所以我有一个嵌套的flexbox情况:

.container (flex)
 -> .child img
 -> .child controls panel (flex)
  -> .controls
  -> .content-wrapper scrolling list
Run Code Online (Sandbox Code Playgroud)

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

在这个基本级别上,如何保持两个并排相同高度的div是一个重复的问题？.

一旦右侧的面板与垂直滚动列表变得更加复杂,我无法看到如何使其父级的高度,第二个.child与第一个的高度相匹配.child. https://codepen.io/neekfenwick/pen/XzGJGw

+-------------+---------------+
|             |  Controls     |
| Left child  |               |
|             +---------------+
|             |              A|
|             | Vertically   |+
|             | scrolling    ||
|             | items        ||
|             |              |+
|             |              V|
+-------------+---------------+
Run Code Online (Sandbox Code Playgroud)

我已经阅读了具有可滚动内容的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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

我不想在这里修复任何元素的高度.碰巧,我知道img的高度,所以我可以用CSS来强制右边元素的高度,但我想知道是否有一个'真正'的flexbox方法来解决这个问题.

LGS*_*Son 6

在一般情况下,overflow: scroll(或auto和hidden)的工作,需要以某种方式或其他高度限制,否则元素的正常生长的需要,以适应其内容之多.

主要有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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

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

它只需一个额外的包装器即可完成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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

单独使用Flexbox,认为它可能无法完全跨浏览器工作,特别是对于旧版本,仍然支持它但是很麻烦.

在原始代码的简单的解决方法是改变flex: 1 1 auto;的.content-wrapper,以flex: 1 1 0px;(0px分别需要我的IE版本,Chrome浏览器/火狐/边缘可以使用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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

代码段2和3也回答了您的问题

...使用垂直滚动列表,我看不到如何使其父级的高度,第二个.child匹配第一个的高度.child.

注意,如果右列中的顶部元素可以比左列大,则底部元素上需要最小高度,以防止它崩溃为0,例如

.content-wrapper {
  ...
  min-height: 200px;           /*  e.g. like this  */
}
Run Code Online (Sandbox Code Playgroud)

  • @Neek是的,`flex-basis:0`(或IE`flex-basis:0px`)意味着简单地说它被视为空的,因此它的`flex-grow:1`将填充剩余的空间.第三个片段是_cleaner_,虽然第二个片段有更好的浏览器支持,因为可能有旧的浏览器,仍然支持Flexbox,可能无法正常工作. (2认同)

归档时间：

查看次数：

1477 次

最近记录：

8 年，8 月 前
如何将两个并排的div保持相同的高度？ 419
具有可滚动内容的 Flexbox 项目 6
带滚动区域的嵌套弹性框 6
更多相关链接
相关归档
是否可以在另一个中引用一个CSS规则？ 95
CSS - 仅显示角落边框 41
保护专有HTML/CSS/JavaScript的最佳方法是什么？ 23
为什么在IE上滚动时固定的背景图像会移动？ 16
在输入中将字符在整个宽度上等分 9
当父元素具有可见性时,是否运行CSS3动画:隐藏？ 8
如何制作一个octogonal div？ 6
Flexbox行在flexbox列中 5
如何在 CSS 中设置特定的 Flexbox 间隙 5
CSS：删除行中的最后一个元素 3
难疑归档
"px","dip","dp"和"sp"之间有什么区别？ 5676
如何确定最初克隆本地Git存储库的URL？ 3782
**(双星/星号)和*(星号/星号)对参数有什么作用？ 2149
如何检查SQL Server表中是否存在列？ 1792
删除包含特定字符串的文本文件中的行 1670
Dockerfile中CMD和ENTRYPOINT有什么区别？ 1484
vim"用sudo写"技巧如何工作？ 1347
什么是右值,左值,x值,glvalues和prvalues？ 1291
如何从我的应用程序中在Android的Web浏览器中打开URL？ 1282
如何测量函数执行所花费的时间 1057