将弹性父轴安装到项目上。
将弹性父轴安装到项目上。
提问于 2017-11-14 15:13:56
在父类具有display: flex; flex-direction: column的地方，是否可以使父项的宽度展开以适应比父项更宽的弹性项？
值得注意的是，祖父母做，而不是有display: flex，也没有固定的宽度。不过它有一个min-width: 100%。
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-11-14 16:41:00
是的，你可以，通过使用inline-flex而不是flex，它将与孩子一起成长。
当使用flex时，flex父元素不会与其子元素一起增长，原因是flex的工作方式类似于块元素，而块元素不会比其父元素(内联元素)增长得更大。
这里可以看到，具有或w/o parent的min-width: 100%不会随其内容而增长，但是inline-flex会增长。如果flex元素有inline-block，情况也是如此。
尽管如此，parent的内容将溢出并影响其周围环境，就好像它将随着内容的增长而增长，并使外部滚动显示出来。
parent with min-width的宽度稍宽是因为padding没有包含在其设置宽度中，因此将box-sizing: border-box;添加到其规则中将使它们的宽度相等。
堆栈段
.parent {
padding: 20px;
background: yellow;
}
.parent.with-min-width {
min-width: 100%;
}
.flex {
display: inline-flex;
flex-direction: column;
background-color: red;
padding: 20px;
}
.flex .item {
width: 800px;
padding: 20px;
background-color: blue;
}<div class="parent">
<div class="flex">
<div class="item">
</div>
</div>
</div>
<div class="parent with-min-width">
<div class="flex">
<div class="item">
</div>
</div>
</div>
Stack Overflow用户
发布于 2017-11-14 15:30:29
在父级上使用inline-flex而不是在祖父母上使用flex和inline-block应该可以做到这一点。
示例B显示了修改。如果img比视口宽，父和祖父母将容纳它(缩小窗口，使img比视口宽，然后向右滚动)。
html,body {
width: auto;
}
.grandparent {
width: 300px;
background-color: blue;
padding: 10px;
}
.parent {
display: inline-flex;
flex-direction: column;
background-color: red;
padding: 10px;
}
.exampleB .grandparent {
min-width: 100%;
width: auto;
display: inline-block;
}
.exampleB .parent {
width: auto;
}<section class="exampleA">
<div class="grandparent">
<div class="parent">
<div class="child">
<img src="//placehold.it/500x100"/>
</div>
</div>
</div>
</section>
<br/>
<section class="exampleB">
<div class="grandparent">
<div class="parent">
<div class="child">
<img src="//placehold.it/500x100"/>
</div>
</div>
</div>
</section>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47289194
复制相关文章
相似问题
腾讯云开发者
