嵌套柔性容器与内部滚动条和舒适/覆盖下部容器 [英] Nested flex containers with inner scroll bar and snug/covering lower container

问题描述

我有一个flexbox容器的嵌套结构，其中一个内部容器需要在可滚动窗格中显示可能的大内容。但是，有时内容很小。

还有一个额外的容器需要始终可见，而且我希望在可滚动内容的下面，即在底部不远处，除非可滚动窗格内容推下来 - 视口可以比内容大得多。

现在我所拥有的除了有右下角 右上角的内容很小：

JsFiddle：

.main {display：flex; height：200px;}。left {flex：1 1 0; background：red;}。right {flex：0 0 0;显示：弯曲; flex-direction：column;背景：绿色; padding：4px;}。right-top-wrapper {flex：1 1 0; overflow-x：auto; overflow-y：scroll; background：blue;}。right-top-content {margin：4px;高度：100像素;宽度：100像素; background：pink;}。right-bottom {flex：0 0 0;背景：黄色; margin：4px;}

 < div class =main > < div class =left>留下内容< / div> < div class =right> < div class =right-top-wrapper> < div class =right-top-content>右上角内容< / div> < / DIV> < div class =right-bottom>右下角< / div> < / div>< / div>  

让右下角紧贴在右上角内容之下，即如果粉红色部分很小，则获得蓝色部分缩小，然后增长到绿色（减黄色）内可用的任何大小（如果粉色部分很大？

我试过 .right-top-wrapper {flex：0 1 0; } 然后缩小到无（结果是 overflow-y：scroll 或 auto ，我不得不允许大右上角的内容）。 设置为 flex：1 1 0 。这可以分解为：

• flex-grow：1

$ li $ flex-shrink：1

• flex-basis：0
  
  

  这是强制元素的 flex-grow：1 消耗列中所有可用空间，将内容（粉红色框）留在后面，并将黄色的右下方框固定在底部。
  
  

  写：

  
  
  

  
  

  我试过 .right-top-wrapper {flex：0 1 0; } 然后缩小到无（结果是 overflow-y：scroll 或 auto

  不，这是<$ c $的结果c> flex-basis：0 ，它转换为 height：0 。如果没有 flex-grow：1 来像以前一样展开高度，那么框的高度是零。

  
  
  

  试试这个相反： .right-top-wrapper {flex：0 1 auto; }

  
  
  

  现在 flex-grow 被禁用，内容。

  
  
  

  您还需要释放粉红色框上的固定高度，以便随蓝色容器一起展开。

    .right-top-content {
   / * height：100px * / 
   min-height：100px; / * new * / 
  } 
    

  修改的小提琴 （小内容） b
  $ b

  修改过的小提琴 （大量内容）
  

  I have a nested structure of flexbox containers, where an inner container needs to show potentially large content in a scrollable pane. However, sometimes the content is small.

  There's an additional container that needs to be always visible, and that I'd like to have just below the scrollable content, i.e. not far down at the bottom unless the scrollable pane content "pushes" it down - the viewport can be much larger than the content.

  What I have right now does everything except have the "Right bottom" come up when the "Right top content" is small:

  JsFiddle: https://jsfiddle.net/u6dou3wf/10/

  .main {
    display: flex;
    height: 200px;
  }
  
  .left {
    flex: 1 1 0;
    background: red;
  }
  .right {
    flex: 0 0 0;
    display:flex;
    flex-direction: column;
    background: green;
    padding: 4px;
  }
  
  .right-top-wrapper {
    flex: 1 1 0;
    overflow-x: auto;
    overflow-y: scroll;
    background: blue;
  }
  
  .right-top-content {
    margin: 4px;
    height:100px;
    width:100px;
    background: pink;
  }
  
  .right-bottom {
    flex: 0 0 0;
    background: yellow;
    margin: 4px;
  }

  <div class="main">
   <div class="left">
   Left content
   </div>
   <div class="right">
    <div class="right-top-wrapper">
     <div class="right-top-content">
      Right top content
     </div>
    </div>
    <div class="right-bottom">
     Right bottom
    </div>
   </div>
  </div>

  How can I get the "Right bottom" to be snugly below the "Right top content", i.e. get the blue section to shrink if the pink section is small, and then grow to whatever size is available inside the green (minus yellow) if the pink section is large?

  I have tried .right-top-wrapper { flex: 0 1 0; } but then it shrinks to nothing (a consequence of overflow-y: scroll or auto, which I have to have to allow large "Right top content").

  解决方案

  Your blue container (.right-top-wrapper) is set to flex: 1 1 0. This breaks down to:

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: 0

  It's the flex-grow: 1 that's forcing the element to consume all available space in the column, leaving the content (pink box) behind, and pinning the yellow "Right bottom" box to the bottom.

  You wrote:

  I have tried .right-top-wrapper { flex: 0 1 0; } but then it shrinks to nothing (a consequence of overflow-y: scroll or auto, which I have to have to allow large "Right top content").

  No, it's a consequence of flex-basis: 0, which translates to height: 0. Without flex-grow: 1 to expand the height like before, the box has a zero height.

  Try this instead: .right-top-wrapper { flex: 0 1 auto; }

  Now flex-grow is disabled and the box takes the height of the content.

  You also need to release the fixed height on the pink box so it expands along with the blue container.

  .right-top-content { 
       /* height: 100px */ 
       min-height: 100px; /* new */
  }
  

  revised fiddle (little content)

  revised fiddle (lots of content)

  这篇关于嵌套柔性容器与内部滚动条和舒适/覆盖下部容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！