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

作者：手机用户2502908275 | 来源：互联网 | 2023-05-17 14:25

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

推荐阅读

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

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

蜡笔小新 2023-12-14 14:37:52
search
阿里Treebased Deep Match(TDM) 学习笔记及技术发展回顾

本文介绍了阿里Treebased Deep Match(TDM)的学习笔记，同时回顾了工业界技术发展的几代演进。从基于统计的启发式规则方法到基于内积模型的向量检索方法，再到引入复杂深度学习模型的下一代匹配技术。文章详细解释了基于统计的启发式规则方法和基于内积模型的向量检索方法的原理和应用，并介绍了TDM的背景和优势。最后，文章提到了向量距离和基于向量聚类的索引结构对于加速匹配效率的作用。本文对于理解TDM的学习过程和了解匹配技术的发展具有重要意义。 ... [详细]

蜡笔小新 2023-12-14 19:24:58
install
Windows下配置PHP5.6的方法及注意事项

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

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

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

蜡笔小新 2023-12-14 10:06:19
js
浏览器中的异常检测算法及其在深度学习中的应用

本文介绍了在浏览器中进行异常检测的算法，包括统计学方法和机器学习方法，并探讨了异常检测在深度学习中的应用。异常检测在金融领域的信用卡欺诈、企业安全领域的非法入侵、IT运维中的设备维护时间点预测等方面具有广泛的应用。通过使用TensorFlow.js进行异常检测，可以实现对单变量和多变量异常的检测。统计学方法通过估计数据的分布概率来计算数据点的异常概率，而机器学习方法则通过训练数据来建立异常检测模型。 ... [详细]

蜡笔小新 2023-12-12 16:22:39
js
Day2列表、字典、集合操作详解

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

蜡笔小新 2023-12-12 14:14:34
js
十大经典排序算法动图演示+Python实现

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

蜡笔小新 2023-12-10 19:28:59
install
Java源代码安全审计（二）：使用Fortify-sca工具进行maven项目安全审计

本文介绍了使用Fortify-sca工具对maven项目进行安全审计的过程。作者通过对Fortify的研究和实践，记录了解决问题的学习过程。文章详细介绍了maven项目的处理流程，包括clean、build、Analyze和Report。在安装mvn后，作者遇到了一些错误，并通过Google和Stack Overflow等资源找到了解决方法。作者分享了将一段代码添加到pom.xml中的经验，并成功进行了mvn install。 ... [详细]

蜡笔小新 2023-12-10 13:01:22
import
机器学习之贝叶斯垃圾邮件分类代码

本文介绍了贝叶斯垃圾邮件分类的机器学习代码，代码来源于https://www.cnblogs.com/huangyc/p/10327209.html，并对代码进行了简介。朴素贝叶斯分类器训练函数包括求p(Ci)和基于词汇表的p(w|Ci)。 ... [详细]

蜡笔小新 2023-12-10 12:24:15
search
Foundation框架中常用结构体和类的介绍

本文介绍了Foundation框架中一些常用的结构体和类，包括表示范围作用的NSRange结构体的创建方式，处理几何图形的数据类型NSPoint和NSSize，以及由点和大小复合而成的矩形数据类型NSRect。同时还介绍了创建这些数据类型的方法，以及字符串类NSString的使用方法。 ... [详细]

蜡笔小新 2023-12-09 17:56:07
js
mintui中的下拉加载，可以一直加载数据，怎么处理呢？

html结构 ... [详细]

蜡笔小新 2023-10-17 10:44:03
js
css设置尖角按钮

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

蜡笔小新 2023-09-17 13:26:50
js
flowable工作流流程变量_信也科技工作流平台的技术实践

1背景随着公司业务发展及内部业务流程诉求的增长,目前信息化系统不能够很好满足期望,主要体现如下：目前OA流程引擎无法满足企业特定业务流程需求，且移动端体 ... [详细]

蜡笔小新 2023-12-13 10:17:15
input
使用圣杯布局模式实现网站首页的内容布局

本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法，包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ... [详细]

蜡笔小新 2023-12-10 20:09:23
input
HTML中表格的页眉页脚布局解决方案

本文介绍了在HTML中实现表格的页眉页脚布局的解决方案。通过基本的HTML/CSS技术，避免使用内联样式和固定定位，实现了一个标准的页眉页脚布局。提供了一个替代的解决方案，为读者提供了参考。 ... [详细]

蜡笔小新 2023-12-10 15:50:47

手机用户2502908275

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

Tags | 热门标签

RankList | 热门文章