Flexbox 调整大小和可滚动溢出 [英] Flexbox resize and scrollable overflow

查看：19
本文介绍了Flexbox 调整大小和可滚动溢出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有要调整大小的内容，并且我想要一个固定的标题，该标题不会增长/缩小并且不属于可滚动内容的一部分.如果没有足够的空间，下面的内容将变为可滚动的.

内容外包装器 (flexGrowWrapper) 有一个 flex-grow: 1，内包装器有 height: 100%；溢出-y:自动.这里的思想过程是 flexGrowWrapper 将填充 resize div 内的任何剩余空间，然后内部包装器将占据 flexGrowWrapper 如果有溢出，它应该滚动.

发生的事情是 flexGrowWrapper 确实增长以填充 resize 区域，但它的内容似乎决定了它的最小高度.

如何让 flexGrowWrapper 永远不会超出 resize 区域的高度?

$("button").click(function() {$(".resize").toggleClass("small");});

.resize {高度:200px；显示:弹性；弹性方向:列；溢出-y:隐藏；宽度:300px；}.resize.small {高度:100px；}.heading {弹性:0 0 自动；}.flexGrowWrapper {边框:2px纯红色；弹性增长:1；}.包装{高度:100%；溢出-y:自动；}.内容 {显示:弹性；弹性方向:行；清楚:两者；}

<div class="flexGrowWrapper"><div class="wrapper"><div class="内容">内容

<div class="内容">内容

<div class="内容">内容

<div class="内容">内容

<div class="内容">内容

<div class="内容">内容

<div class="内容">内容

<div>这里还有其他东西

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

注意:我查看了这个类似的问题，但似乎有一些差异，我无法找到适合我的解决方案.

解决方案

Add min-height: 0 到 .flexGrowWrapper - 看下面的演示:

$("button").click(function() {$(".resize").toggleClass("small");});

.resize {高度:200px；显示:弹性；弹性方向:列；溢出-y:隐藏；宽度:300px；}.resize.small {高度:100px；}.heading {弹性:0 0 自动；}.flexGrowWrapper {边框:2px纯红色；弹性增长:1；最小高度:0；/* 添加 */}.包装{高度:100%；溢出-y:自动；}.内容 {显示:弹性；弹性方向:行；清楚:两者；}

<div class="flexGrowWrapper"><div class="wrapper"><div class="内容">内容

<div class="内容">内容

<div class="内容">内容

<div class="内容">内容

<div class="内容">内容

<div class="内容">内容

<div class="内容">内容

<div>这里还有其他东西

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<小时>

为什么有效

请注意，这是因为对于 column flexbox，默认的 min-height 值为 auto(沿着 flex 轴).您可以在下面看到此行为的一些示例:

I have content that I am resizing, and I want to have a fixed heading that doesn't grow/shrink and is not part of the scrollable content. With the content below becoming scrollable if there is not enough space.

The content outer wrapper (flexGrowWrapper) has a flex-grow: 1 and the inner wrapper has height: 100%; overflow-y: auto. The thought process here is that flexGrowWrapper will fill up any remaining space within the resize div, the inner wrapper will then take the full height of the flexGrowWrapper and if there is overflow, it should scroll.

What is happening is that flexGrowWrapper does grow to fill the resize area, but it seems that it's content is dictating it's min-height.

How can I make flexGrowWrapper never go beyond the resize area height?

$("button").click(function() {
	$(".resize").toggleClass("small");
});

.resize {
  height: 200px;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  width: 300px;
}

.resize.small {
  height: 100px;
}

.heading {
  flex: 0 0 auto;
}

.flexGrowWrapper {
  border: 2px solid red;
  flex-grow: 1;
}

.wrapper {
  height: 100%;
  overflow-y: auto;
}

.content {
  display: flex;
  flex-direction: row;
  clear: both;
}

<button>
Resize
</button>
<div class="resize">
  <div class="heading">
  <label>Some heading that wont scroll</label>
  </div>
  <div class="flexGrowWrapper">
    <div class="wrapper">
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
    </div>
  </div>
</div>
<div>
 Something else here
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Note: I looked at the this similar question, but it seems to have some differences, and I couldn't get the solutions to work for me.

解决方案

Add min-height: 0 to .flexGrowWrapper - see demo below:

$("button").click(function() {
  $(".resize").toggleClass("small");
});

.resize {
  height: 200px;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  width: 300px;
}

.resize.small {
  height: 100px;
}

.heading {
  flex: 0 0 auto;
}

.flexGrowWrapper {
  border: 2px solid red;
  flex-grow: 1;
  min-height: 0; /* ADDED */
}

.wrapper {
  height: 100%;
  overflow-y: auto;
}

.content {
  display: flex;
  flex-direction: row;
  clear: both;
}

<button>
Resize
</button>
<div class="resize">
  <div class="heading">
    <label>Some heading that wont scroll</label>
  </div>
  <div class="flexGrowWrapper">
    <div class="wrapper">
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
    </div>
  </div>
</div>
<div>
  Something else here
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Why this works

Note that this is because for a column flexbox the default min-height value is auto (along the flex axis). You can see some examples of this behaviour below:

这篇关于Flexbox 调整大小和可滚动溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆