Flexbox内容物不能拉伸以适应容器，尽管它们的高度没有在任何地方设置
Flexbox是一种用于网页布局的CSS模块，它提供了一种灵活的方式来排列和对齐网页元素。在Flexbox中，容器和内容物（也称为Flex项）之间存在父子关系。
当Flexbox容器的尺寸发生变化时，内容物默认情况下会根据其自身的尺寸和设置进行拉伸以适应容器。然而，如果内容物的高度没有在任何地方设置，它们将不会被拉伸以适应容器。
这种行为可以通过设置内容物的flex属性来改变。flex属性是一个简写属性，包含了flex-grow、flex-shrink和flex-basis三个值。其中，flex-grow决定了内容物在容器中的拉伸比例，默认为0，表示不拉伸。如果将flex-grow设置为一个正数，内容物将按照比例进行拉伸。flex-shrink决定了内容物在容器中的收缩比例，默认为1，表示可以收缩。flex-basis定义了内容物在主轴方向上的初始尺寸，默认为auto，表示根据内容物的尺寸自动计算。
如果希望内容物能够拉伸以适应容器，可以将其flex属性设置为一个正数，例如flex: 1。这样，内容物将按照比例进行拉伸，以填充容器的剩余空间。
在腾讯云的产品中，与Flexbox相关的推荐产品是腾讯云的云服务器（CVM）。云服务器提供了灵活的计算资源，可以根据实际需求进行弹性调整，适用于各种网页布局和应用场景。您可以通过以下链接了解更多关于腾讯云云服务器的信息：https://cloud.tencent.com/product/cvm
相关·内容
我有一个flex容器，它的高度设置为一个特定值(100%，但它的父对象是一个特定值。我希望这些项目填满可用空间，而不考虑其中的内容(特别是第二个项目，treeview1，它的溢出设置为滚动。然而，这些项目根本不能伸展以填充。你对我有什么建议么？
浏览 17提问于2020-02-25得票数 2
回答已采纳
我在下面创建了一个简单的JSFiddle。为什么我的粉红盒子(.screen)没有长到完全的高度，一直到红色和蓝色的盒子？我曾尝试将height: 100%设置在screen div上，但这使它长大了--在.inner-container中，并将自身置于.bottom之上。当用户单击按钮来共享屏幕时，我会将.subscriber设置为width: 10rem，并显示.screen。只要使用宽度，我就可以“移动”订阅者
浏览 5提问于2020-04-13得票数 3
回答已采纳
我正试着用flexbox做一个堆叠布局。理想情况下，它应该是这样的：其中底部(蓝色) div是250px的固定高度，顶部div是n-250，其中n是父容器的大小--换句话说，顶部应该拉伸以填满容器。当我有了容器高度时，我对如何做到这一点有一些想法，但我宁愿避免在运行时必须确定该变量。这个问题已经以各种形式详细讨论过了，但似乎都没有解决这个简单的
浏览 0提问于2017-01-05得票数 5
回答已采纳
3回答
是否有任何机制可以指定flex-*样式属性，用于在flexbox的横轴上进行布局？
我有一个布局，由两个水平对齐的框组成，在可变宽度的弹性框中具有最小宽度。如果右边的框填满了内容，当我需要它开始滚动时，它就会开始溢出容器。在这里，我能做的最好的事情就是在容器上设置一个overflow-y，它滚动整个容器，包括左边的</e
浏览 0提问于2014-09-03得票数 19
1回答
我想在下面的布局中做两个特定的列，拉伸整个页面的高度，除非他们的移动(平板电脑)他们仍然可以拉伸，因为大多数平板电脑是720。class="col-md-10"> <div class="col-md-1"> </div>
col-md-1，现在只能伸展到你放入其中的内容，不管我怎么
浏览 1提问于2014-02-19得票数 0
div> <div class="box box-9">9</div>
</section> 当我们在flex-items上设置了flex-direction: row (默认值)和width时，它们会在父元素中缩小，所以现在它们的宽度不是300px，它们</em
浏览 76提问于2021-10-26得票数 0
回答已采纳
1回答
我有一个父的flexbox (它也是一个列flexbox的一部分)： width:100%;
flex: 1 1 auto;第二个图像大小过大，设置为100%宽度，因此缩小到它的容器。IE中，最初img的高度似乎扩展了父容器(尽管它确实收缩以适应其容器)。如果我设置</em
浏览 1提问于2015-10-26得票数 6
卡中的信息是动态调整的，有时一张卡中的信息比另一张卡中的信息更少。我用vanilla JS均衡了这些盒子，但我想肯定有更好的方法来解决这个问题()： box.style.height = `${highest}px`;}
我分隔了两个循环，因为
浏览 9提问于2021-05-18得票数 0
在其中，我以编程方式添加n”标签容器“UIView，这些容器的高度取决于它们承载的m UILabel的内容。现在，我正在用n UILabel和boundingRectWithSize:计算boundingRectWithSize:的大小，并对它们的父“标签容器”UIView的高度进行大小估计，该UIView是在
浏览 3提问于2017-04-26得票数 2
回答已采纳
2回答
我正在尝试使用Flexbox创建一个可视化布局。
在此布局中，控件以行的形式排列。一些行将具有预定义的高度，并且一些行将同时锚定到屏幕的顶部和底部，这意味着它们将拉伸其高度以占据所有可用空间。我有一个可以实现这一点的工作布局，但当具有预定义高度的行需要拉伸时，似乎存在一个问题，因为它们的内容不
浏览 10提问于2017-07-20得票数 1
回答已采纳
我正在为一个网站做一个小的聊天/流媒体部分。视频的样式使其始终保持16:9的纵横比。旁边的聊天我想要和视频一样的高度。聊天框具有溢出属性，因此当聊天超过一定高度时，它将拉伸父容器以显示div中的所有聊天项；这是意料之中的。我真正想问的是，我如何才能使一个flexbox列的高度只达到第一个列的<
浏览 0提问于2018-04-22得票数 0
2回答
我将链接CodePen中的代码。它只是我布局的一个子集。这就是一些根元素的样式化的原因。基本上，我有一个布局，页面/屏幕/窗口不应该有滚动，但是当有足够多的元素超出表的预期区域时，表小部件的内部就应该有。
基本上，我在页面上有一个顶部的内容，还有一个表小部件。表小部件将占用屏幕的其余空间。该表有一个标题和一个标题。主体将占据表空间的其余部分，当它有超出该空间<e
浏览 0提问于2019-05-24得票数 2
回答已采纳
1回答
我有这样的引导布局： <div class="row"> <<div>Block 1 content</div> </div>
</div>
浏览 2提问于2016-01-17得票数 3
回答已采纳
2回答
我正在为我的网站构建一个侧边栏，并试图使它成为页面的其他高度后的元素。不过，我想不出怎么做。我正在使用引导程序4，但是问题可能在我的CSS中，我现在就会发布。important;}您可以在那里找到所有其他相关代码。但我真正关心的是侧杠
浏览 1提问于2018-11-24得票数 0
回答已采纳
2回答
如何定位一个元素，使其始终位于容器的底部，而不使用“绝对”定位？我有一个包含两个元素的容器，其中一个是文本描述，所以它可以和文本一样大。我希望将第二个元素放置在页面底部，而不管之前的div中的文本是否为空，如果文本不是空的，我希望在它们之间填充10‘t。
浏览 2提问于2016-10-05得票数 3
回答已采纳
2回答
我有一个div (容器)，它包含另一个div (内容)。在内容div中，我有更多的div(项目)。内容div需要增长以适应项div。这件事很管用。不起作用的是容器div需要增长以适应内容div，但它不适合。
我不能事先指定任何宽度或高度，因为我不知道它们需要是什么。span class="s">span
浏览 0提问于2021-10-10得票数 0
回答已采纳
2回答
<option value="High">High</option> </div>
</div></div> 在导航栏上打开我的模式("+“图标)后，我希望输入组的高度与左侧的”保存更改“按钮的高度</em
浏览 6提问于2019-06-02得票数 1
2回答
获取错误的画布高度
、、、
我画错了画布的高度。这里出什么问题了？canvas.width / 2;var y = canvas.height / 2;请看一下你的控制台
浏览 4提问于2014-03-05得票数 1
回答已采纳
[CDATA[$V{PAGE_NUMBER}]]></textFieldExpression>在我们的测试环境中，一切都很好。正确显示页码。你知道是什么导致了我们和客户环境中的行为差异吗？您是否有任何提示或您知道关于呈现字段的评估类型和报
浏览 1提问于2012-09-04得票数 5
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
