使用NEWER flexbox api在全高度应用程序中进行Flexbox和垂直滚动 [英] Flexbox and vertical scroll in a full-height app using NEWER flexbox api

问题描述

我想使用flexbox的全高度应用程式。我发现我想使用旧的flexbox（显示：框;和其他东西）在这个链接： CSS3 Flexbox全高应用程序和溢出

这是一个正确的解决方案为旧版本的flexbox css属性。

如果我想尝试使用较新的flexbox属性，我将尝试使用同一链接中的第二个解决方案，但hackingflexbox 使用一个height为0px的容器它显示一个垂直滚动。

我不喜欢它很多，因为它介绍了其他问题和它是一个workarround <

我已经准备了一个基本示例的jsfiddle： http： //jsfiddle.net/ch7n6/

  #container {
 display：-webkit-flex; 
 -webkit-flex-direction：column; 
 height：100％; 
} 
 #container article {
 -webkit-flex：1 1 auto; 
 overflow-y：scroll; 
} 
  

这是一个全高度html网络，页脚位于底部是因为内容元素的flexbox。我建议你移动css代码和结果之间的bar来模拟不同的高度。

解决方案 //stackoverflow.com/users/1652962/cimmanon\">http://stackoverflow.com/users/1652962/cimmanon 给了我答案。

解决方案是设置垂直滚动元素的高度。例如：

  #container article {
 -webkit-flex：1 1 auto; 
 overflow-y：auto; 
 height：0px; 
} 
  

元素会具有高度，因为flexbox会重新计算除非您想要一个 min-height ，以便您可以使用 height：100px; ，它与以下内容完全相同： min-height：100px;

  #container article {
 -webkit-flex：1 1 auto; 
 overflow-y：auto; 
 height：100px; / * == min-height：100px * / 
} 
  

您想在垂直卷动中设定最小高度：

  #container article {
 -webkit-flex：1 1 auto; 
 overflow-y：auto; 
 min-height：100px; 
} 
  

如果你只是想要完全垂直滚动的情况下没有足够的空间文章：

  #container article {
 -webkit-flex：1 1 auto; 
 overflow-y：auto; 
 min-height：0px; 
} 
  

最终代码：http://jsfiddle.net/ch7n6/867/

I want to use a full-height app using flexbox. I found what I want using old flexbox (display: box; and other things) in this link: CSS3 Flexbox full-height app and overflow

This is a correct solution for the old version of the flexbox css properties.

If I want to try using the newer flexbox properties I'll try to use the second solution in the same link but "hacking" flexbox using a container with height: 0px; It makes to show a vertical scroll.

I don't like it a lot because It introduces other problems and it is more a workarround than a solution.

I have prepared a jsfiddle with a base example: http://jsfiddle.net/ch7n6/

#container {
    display: -webkit-flex;
    -webkit-flex-direction: column;
    height: 100%;
}
#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: scroll;
}

It is a "full-height html web" and the footer are at the bottom because of the flexbox of the content element. I suggest you move the bar between css code and result to simulate different height.

解决方案

Thanks to http://stackoverflow.com/users/1652962/cimmanon that gave me the answer.

The solution is setting a height to the vertical scrollable element. For example:

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    height: 0px;
}

The element will have height because flexbox recalculates it unless you want a min-height so you can use height: 100px; that it is exactly the same as: min-height: 100px;

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    height: 100px; /* == min-height: 100px*/
}

So the best solution if you want a min-height in the vertical scroll:

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    min-height: 100px;
}

If you just want full vertical scroll in case there is no enough space to see the article:

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}

The final code: http://jsfiddle.net/ch7n6/867/

这篇关于使用NEWER flexbox api在全高度应用程序中进行Flexbox和垂直滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！