Flexbox 将内部元素的高度设置为 0

问题描述 投票：0回答：5

我对弹性盒有疑问。当我设置段落的高度并将其 

overflow
设置为 
hidden
时，该段落会在 Flexbox 
div
中消失。

这是小提琴： https://jsfiddle.net/Slit/0yy3q8bL/

代码：

        <div class="N">
            <p>Lorem ipsum</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <img src="http://codegentstatic-codegentltd.netdna-ssl.com/media/original/0d9648a6-afc6-1/845x2000.jpg">
        </div>

<style>
.N {
    overflow: scroll;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    min-width: 100vmin;
    width: 100vmin;
    height: 65vmin;
    border: 1px solid green;
    list-style: none;

}

.N img {
    display: list-item;
    width: 98%;
    height: 98%;
    order: 1;
}

.N p:nth-child(1) {
    display: list-item;
    font-size: 4vmin;
    order: 2;
    background-color: white;
}

.N p:nth-child(2) {
    overflow: hidden;
    height: 20%;
    display: list-item;
    text-align: justify;
    font-size: 4vmax;
    background-color: white;
    order: 3;
}
</style>
css flexbox
5个回答
24
投票

然后Flexbox模块改变了

min-height
的初始值：

4.5 Flex 项目的隐含最小尺寸

为flex items提供更合理的默认最小尺寸， 该规范引入了一个新的 auto 值作为初始值 中定义的 min-width 和 min-height 属性的值 CSS 2.1.

那个 

auto
值的行为如下：

在主轴上可见溢出的弹性项目上，当 在 Flex 项目的主轴最小尺寸属性上指定， 下表给出了最小尺寸：

┌────────────────┬──────────────────┬─────────────────────────────────────┐
│ Specified Size | Transferred Size |            Minimum Size             |
├────────────────┼──────────────────┼─────────────────────────────────────┤
|                |                  | content size                        |
|       ✓        |                  | min(specified size, content size)   |
|                |        ✓         | min(transferred size, content size) |
|       ✓        |        ✓         | min(specified size, content size)   |
└────────────────┴──────────────────┴─────────────────────────────────────┘

否则，此关键字计算结果为 0（除非由 未来的规格）。

因此 

min-height: auto
会强制 
p
元素足够高，以便在 
oveflow: visible
时显示内容。但是当你将其更改为 
overflow: hidden
时，
min-height
就变成了 
0
。由于没有空间，
p
元素会缩小。

因此，要么使用 

overflow: visible
，要么手动施加一些 
min-height
。

或者，您可以使用 

flex-shrink: 0
来防止收缩。请注意，由于您有 
height: 20%
，部分内容可能仍会被剪辑。

.N {
  overflow: scroll;
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  min-width: 100vmin;
  width: 100vmin;
  height: 65vmin;
  border: 1px solid green;
  list-style: none;

}
.N img {
  display: list-item;
  width: 98%;
  height: 98%;
  order: 1;
}
.N p:nth-child(1) {
  display: list-item;
  font-size: 4vmin;
  order: 2;
  background-color: white;
}
.N p:nth-child(2) {
  overflow: hidden;
  height: 20%;
  display: list-item;
  text-align: justify;
  font-size: 4vmax;
  background-color: white;
  order: 3;
  flex-shrink: 0;
}
<div class="N">
  <p>Lorem ipsum</p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <img src="http://codegentstatic-codegentltd.netdna-ssl.com/media/original/0d9648a6-afc6-1/845x2000.jpg">
</div>

相反，你可能想要这样的东西：

min-height: 20%;
height: auto;
flex-shrink: 0;


.N {
  overflow: scroll;
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  min-width: 100vmin;
  width: 100vmin;
  height: 65vmin;
  border: 1px solid green;
  list-style: none;

}
.N img {
  display: list-item;
  width: 98%;
  height: 98%;
  order: 1;
}
.N p:nth-child(1) {
  display: list-item;
  font-size: 4vmin;
  order: 2;
  background-color: white;
}
.N p:nth-child(2) {
  overflow: hidden;
  display: list-item;
  text-align: justify;
  font-size: 4vmax;
  background-color: white;
  order: 3;
  min-height: 20%;
  flex-shrink: 0;
}
<div class="N">
  <p>Lorem ipsum</p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <img src="http://codegentstatic-codegentltd.netdna-ssl.com/media/original/0d9648a6-afc6-1/845x2000.jpg">
</div>

7
投票

抱歉回复旧帖子。我疯狂地试图解决一个类似的问题，其中我有一些嵌套的 Flex 内容，其高度为 0，尽管它显然有子项，并且子项有高度！

我通过在高度为 0 的元素上设置 

flex: 0 0 auto
解决了这个问题（在把弹性盒子骂死了一个小时之后）。单独设置 flex-basis 是不够的。我希望这对其他看到这篇文章的人有用。

在此之前，我尝试过各种方法。 A 

min-height
也有效，但我真的想避免对高度进行硬编码，因为它应该是动态的。

2
投票

虽然我无法解释为什么它有效，但我有两个解决方案可以在其他答案不起作用的情况下起作用。我遇到过这样的情况：嵌套在多层 Flex 列和行中的元素在给定 

height: 100%
时拒绝拉伸到其直接父级的完整高度。

我发现在这种情况下有效的两个解决方案：

  1. 将问题元素祖先中的所有元素的高度设置为 100%。
  2. （可能是更好的解决方案）：从问题元素中删除 
    height: 100%
    并将其替换为 
    align-self stretch
    或将 
    align-items: stretch
    添加到直接父级。
0
投票

其他建议均无效。在摆弄父容器时，我注意到浏览器说 flex 不起作用，因为父容器是 display:block。

然后，我在我的 Flexbox div 周围创建了一个新的包装器 div 并设置它的 display:grid ，这是我的页面的 body 标签使用的显示设置（不要责怪我。责怪 shopify）。

现在的结构就是这样

<body style="display:grid">
<div style="display:block">
<div id="newWrapperDiv" style="display:grid">
<div style="display:flex">
...my actual content...

我只能说 HTML 和 CSS 很蹩脚，需要完全重构。

0
投票

没有什么对我有用，但我找到了解决方案。

display: flow-root;

对我来说效果很好。希望它对某人有帮助。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.