使flex父扩展和溢出包装-Makeflexparentexpandandoverflowwrapper

作者：王者灬旋律 | 来源：互联网 | 2023-05-19 07:24

HowdoImakeaflexparentwithanowrapflex-wrapexpandtofititscontentevenifthatmeansove

How do I make a flex parent with a nowrap flex-wrap expand to fit its content even if that means overflowing whatever is wrapping the parent?

如何使用nowrap flex-wrap扩展以使其适合其内容的flex父级，即使这意味着溢出包装父级的任何东西？

Basically, the content has a min-width, I want the flex parent not to shrink more than the space all the flex items need.

基本上，内容具有最小宽度，我希望flex父级不要缩小所有弹性项所需的空间。

Here is a JSFiddle https://jsfiddle.net/lazamar/odat477r/

这是一个JSFiddle https://jsfiddle.net/lazamar/odat477r/

.wrapper {
  background-color: yellowgreen;
  display: block;
  padding: 10px;
  max-width: 180px;
}
.parent {
  display: flex;
  flex-flow: row nowrap;
  background-color: yellow;
}
.child {
  display: block;
  background-color: orange;
  margin: 10px;
  min-width: 50px;
}


  
    Content
    Content
    Content
    Content
    Content

2 个解决方案

#1

You could apply position:absolute to the flex container, which removes it from the document flow.

您可以将position：absolute应用于flex容器，从而将其从文档流中删除。

.wrapper {
  background-color: yellowgreen;
  display: block;
  padding: 10px;
  max-width: 180px;
  position: relative;             /* new; set bounding box for flex container  */
  min-height: 40px;               /* new */
}

.parent {
  display: flex;
  flex-flow: row nowrap;
  background-color: yellow;
  position: absolute;             /* new; remove flex container from document flow */
}

.child {
  /* display: block;              <-- not necessary */
  background-color: orange;
  margin: 10px;
  min-width: 50px;
}


  
    Content
    Content
    Content
    Content
    Content

#2

The answer is what t1m0n said. Use display: inline-flex instead of display: flex for the parent.

答案就是t1m0n所说的。对于父级，使用display：inline-flex而不是display：flex。

.wrapper {
  background-color: yellowgreen;
  display: block;
  padding: 10px;
  max-width: 180px;
}
.parent {
  display: inline-flex; /* -- only change --*/
  flex-flow: row nowrap;
  background-color: yellow;
}
.child {
  display: block;
  background-color: orange;
  margin: 10px;
  min-width: 50px;
}


  
    Content
    Content
    Content
    Content
    Content

推荐阅读

容器
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
jsp
知识图谱——机器大脑中的知识库

本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]

蜡笔小新 2023-12-14 10:06:19
copy
Day2列表、字典、集合操作详解

本文详细介绍了列表、字典、集合的操作方法，包括定义列表、访问列表元素、字符串操作、字典操作、集合操作、文件操作、字符编码与转码等内容。内容详实，适合初学者参考。 ... [详细]

蜡笔小新 2023-12-12 14:14:34
function
一篇文章搞定css3 3d效果

css33d学习心得卡片反转魔方banner图首先我们要学习好css33d一定要有一定的立体感通过这个图片应该清楚的了解到了x轴y轴z轴是什么概念了。首先先给大家看一个小 ... [详细]

蜡笔小新 2023-10-11 12:41:15
javascript
如何使用JavaScript动态设置CSS3属性值

这篇文章将为大家详细讲解有关如何使用JavaScript动态设置CSS3属性值，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读 ... [详细]

蜡笔小新 2023-10-11 05:24:06
javascript
试图实现向上箭头 - trying to achieve arrow pointing upwards

Iamtryingtoachievethearrowpointingupwards..iamtryingtoachieveitinmycssiamnotabl ... [详细]

蜡笔小新 2023-10-09 19:41:30
js
css设置尖角按钮

http:js.alixixi.coma2014021292298.shtmlhttp:w3cshare.comexample?pid134http:w3cshare.comc ... [详细]

蜡笔小新 2023-09-17 13:26:50
dll
Windows下配置PHP5.6的方法及注意事项

本文介绍了在Windows系统下配置PHP5.6的步骤及注意事项，包括下载PHP5.6、解压并配置IIS、添加模块映射、测试等。同时提供了一些常见问题的解决方法，如下载缺失的msvcr110.dll文件等。通过本文的指导，读者可以轻松地在Windows系统下配置PHP5.6，并解决一些常见的配置问题。 ... [详细]

蜡笔小新 2023-12-14 12:37:25
jsp
高质量SQL书写的30条建议

本文提供了30条关于优化SQL的建议，包括避免使用select *，使用具体字段，以及使用limit 1等。这些建议是基于实际开发经验总结出来的，旨在帮助读者优化SQL查询。 ... [详细]

蜡笔小新 2023-12-13 13:24:33
merge
十大经典排序算法动图演示+Python实现

本文介绍了十大经典排序算法的原理、演示和Python实现。排序算法分为内部排序和外部排序，常见的内部排序算法有插入排序、希尔排序、选择排序、冒泡排序、归并排序、快速排序、堆排序、基数排序等。文章还解释了时间复杂度和稳定性的概念，并提供了相关的名词解释。 ... [详细]

蜡笔小新 2023-12-10 19:28:59
merge
前端实用的CSS3技巧有哪些

本文小编为大家详细介绍“前端实用的CSS3技巧有哪些”，内容详细，步骤清晰，细节处理妥当，希望这篇“前端实用的CSS3技巧有哪些”文章能帮助大家 ... [详细]

蜡笔小新 2023-09-25 13:50:50
js
前端每日实战 2018年10月至2019年6月项目汇总（共 20 个项目）

过往项目2018年9月份项目汇总（共26个项目）2018年8月份项目汇总（共29个项目）2018年7月份项目汇总（共29个项目）2018年6月份项目汇总（共27个项目）2018年5 ... [详细]

蜡笔小新 2023-09-18 20:39:06
js
CSS3背景颜色渐变效果

1.CSS3透明度渐变（从左到右）#grad{background:-webkit-linear-gradient(left,rgba(198,226,255,1),rgba(19 ... [详细]

蜡笔小新 2023-09-17 20:26:32
js
css3基础学习笔记

1、给边框加上圆角及阴影，如下代码：<!DOCTYPEhtmlPUBLIC"-W3CDTDHTML4.01TransitionalEN"" ... [详细]

蜡笔小新 2023-09-17 19:38:46
js
在DIV内垂直居中UL - Centering Vertically an UL inside a DIV

iamtryingtomakeanavigationmenuinsidea200pxx200pxsquare,thisnavigationlist(UL)chang ... [详细]

蜡笔小新 2023-09-16 19:05:52

王者灬旋律

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章