"flex: 1“父代和"min-height”祖辈的子代没有采用"width: 100%“
"flex: 1"是CSS中的一个属性，用于设置元素的弹性伸缩性。它可以应用于父元素，用于控制子元素的布局。
当父元素设置了"flex: 1"时，子元素会根据父元素的剩余空间进行伸缩。具体来说，子元素会根据自身的flex-grow、flex-shrink和flex-basis属性来计算自己的大小。
- flex-grow：定义了子元素在父元素剩余空间中的增长比例，默认为0，表示不进行伸缩。
- flex-shrink：定义了子元素在父元素剩余空间不足时的收缩比例，默认为1，表示按比例收缩。
- flex-basis：定义了子元素在父元素剩余空间中的初始大小，默认为auto，表示根据内容自动调整大小。
"min-height"是CSS中的一个属性，用于设置元素的最小高度。它可以应用于祖先元素或子元素。
当子元素没有采用"width: 100%"时，它的宽度会根据内容自动调整，而不会占满父元素的宽度。
综上所述，"flex: 1"父元素和"min-height"祖先元素的子元素没有采用"width: 100%"时，子元素的宽度不会占满父元素的宽度，而是根据内容自动调整。
相关·内容
我需要在屏幕底部隐藏一个页脚，并且能够使用整个flex增长的剩余高度作为content子项，而不是继承所有的max-height，这是可能的吗？}
/* pushes the footer just after the bottom */ flex-direction: column;
.content-child
浏览 47提问于2021-07-05得票数 0
2回答
但是当我硬编码孩子的高度时，我希望看到一个滚动条。但相反，子代只是填充父代。 height:100%;.grand-parent{ overflow:auto;} flex-direction:column; width
浏览 0提问于2018-08-13得票数 1
我遇到的问题是，我正在尝试使诸如child之类的div始终相对于容器采用相同的高度，即使它们是空的。因此，如果有两个子代，它们必须是父代的50%，如果有三个子代，则父代和ec的比例为33.3%。做了大量的挖掘，尝试使用flex-grow并将其设置在子类上，如果childContent类为空，但空子类仍然折叠，则在该类上添加after内容。在不使用
浏览 0提问于2019-05-30得票数 1
1回答
width: 100px;} position: relative; -moz-flex: 1; flex: 1;
background-colo
浏览 3提问于2014-05-09得票数 2
1回答
我正在尝试弄清楚是否有某种方法可以使百分比引用父母的父母。#fluid { height: 75vh; position: absolute; width: 100px; background: wh
浏览 0提问于2017-01-26得票数 0
我正在创建一个标题为我的网站使用flex与绝对定位的子菜单。我希望子菜单跨越整个页面的宽度，但我希望它与窗口的左侧齐平，而不是与父菜单齐平。 li { position:relative; margin-left:30px;} height:20px; positio
浏览 16提问于2020-07-02得票数 1
回答已采纳
因此，基本上我希望在一行中包含多个元素的某种类型的库，直到该行被填满-然后它应该交换到下一行。}
height: 50%; flex-basis: calc(50% -min-heig
浏览 10提问于2021-02-18得票数 0
2回答
我想出了一个非常奇怪的行为。我创建了3个div，它们的高度以百分比表示。当我在它们自己的页面上测试它们时，它们的行为与预期一样，但当我将它们包含在另一个容器中时，它们的高度就会丢失。box-sizing: border-box;}
background-color: #eee; height:auto !import
浏览 2提问于2015-08-20得票数 1
下面是滚动窗口后我的窗口图像的屏幕截图
我给我的头部和主要部分使用flex的高度为45px。在主要部分中，我有左部分和右部分。每当我最小化或最大化我的窗口时，我希望我的左侧部分采用全屏高度。虽然我已经设置了100%的高度，但左侧面板没有通过滚动进行调整<body>
<header></header>
浏览 0提问于2016-05-15得票数 0
有没有办法让绝对定位的子代扩展以填充其相对定位的父代？( parent的高度不固定)这就是我所做的，它在火狐和IE7上工作得很好，但在IE6上却不行。:( <div id="child1"></div>
#parent { position: relative; <em
浏览 0提问于2009-08-04得票数 12
width: 100%; display: flex;图像：
这是在调整大小之后。请注意，内容位于标题后面：我要寻找的是在调整大小之后，内容保持在顶部，就像在第一个图像上一样，溢出是scrollable.，而且，我也希望它是内容和标题之间的一个空白。编辑#1:.application {
text-align: cente
浏览 2提问于2022-03-12得票数 0
回答已采纳
我是Flexbox的新手，我试图用它来创建一个具有固定页眉、固定页脚和内容区域的布局，以填充页眉和页脚之间的可用空间。内容区域是一个可滚动的区域，它有3个面板(Div)，每个面板都有100%的高度。为了演示的目的，我把a，b，c(我把它们称为panel a，Panel b和Panel c)放在每个面板的顶部。
在火狐v39中，面板a、b和c采用可滚动容器的
浏览 0提问于2015-07-15得票数 6
回答已采纳
我有一个图像，我想要在div中的另一个图像上显示。div有填充和边距。我想要将图像对齐到div的顶部和左侧，而不是div显示的填充。div是相对位置，image是绝对位置。-- ---CSS FOLLOWS, EXTRA CSS REMOVED--- -->
position: relative;margin:auto;
position: relative;
.
浏览 0提问于2019-01-23得票数 1
2回答
我的身体有完全的高度，但是含有100%的最小高度的div不能填充.我想要蓝色填充它的身体容器和弯曲对齐内部div。
min-height: 100%;}
min-height: 100%; background-color
浏览 1提问于2019-03-17得票数 2
回答已采纳
1回答
我的绿栏已经做好了，但是做红色部分有问题。 flex-direction: column; height: 400px;}
flex: 1; background-color: #FFAD77;
width: 30%
浏览 0提问于2018-03-30得票数 1
回答已采纳
Div 1应该根据div 2的宽度自动调整宽度，这样当div 1中的内容增加时，高度就会增加，而不是宽度，这样就不会把div 2推出，或者不会影响div 2。 background: red; width: auto;}
background: green; width: 40
浏览 5提问于2018-08-15得票数 0
我已经搜索并尝试了很多解决方案，但没有一个解决方案对我的案子有效。我在这里设置了body和main都不应该改变的地方。在它们里面，我可以添加任意数量的div，并改变任何样式。; min-height: 100vh; width: 100%; border: 1</
浏览 1提问于2022-08-10得票数 1
回答已采纳
2回答
我的笔记本电脑可以正常工作，但在移动iOS上就不行了。 min-height: 100vh;}
display: flex; flex: 1;
flex-direction: colum
浏览 0提问于2019-06-10得票数 8
回答已采纳
4回答
我尝试将一个元素水平居中： <div id="child">在孩子上，我现在有以下css，它没有居中：不幸的是，50%取自#子代，而不是父代。有没有办法使用变换使这个元素居中(我知道我可以用‘left’将它居中)？下面是css的完整列表 width</
浏览 0提问于2013-12-12得票数 7
3回答
我有一排三张图片，它们应该居中对齐，因此与下面相应的div对齐。每个图像都在其自己的Div中。它们完美地对齐了，然而，当我给它们添加一个HREF时，它们都向左移动，我不明白为什么。: center;}
width: 25%; margin: auto; width: 25%;
height: 100%;
浏览 10提问于2020-01-28得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
