html – 将孩子装入父母

概述我在底部嵌套了带有文本的flex元素.顶部元素的固定宽度小于文本： .list-header { display: flex; width: 150px; height: 80px; background-color: #ececec;}.list-component { display: flex; flex: 1; padding-left: 24px; 我在底部嵌套了带有文本的flex元素.顶部元素的固定宽度小于文本：

.List-header {  display: flex;  wIDth: 150px;  height: 80px;  background-color: #ececec;}.List-component {  display: flex;  flex: 1;  padding-left: 24px;  padding-right: 24px;}.header-container {  display: flex;  flex: 1;}.header-text {  display: flex;  flex-direction: column;  justify-content: center;  overflow: hIDden;}span {  text-overflow: ellipsis;  white-space: nowrap;  overflow: hIDden;}

<div >  <div >    <div >      <div >        <span>long long long long long long text</span>      </div>    </div>  </div></div>

我可以通过应用overflow：hIDden来解决这个问题.对所有元素：

.List-header {  display: flex;  wIDth: 150px;  height: 80px;  background-color: #ececec;}.List-component {  display: flex;  flex: 1;  padding-left: 24px;  padding-right: 24px;  overflow: hIDden;}.header-container {  display: flex;  flex: 1;  overflow: hIDden;}.header-text {  display: flex;  flex-direction: column;  justify-content: center;  overflow: hIDden;}span {  text-overflow: ellipsis;  white-space: nowrap;  overflow: hIDden;}

<div >  <div >    <div >      <div >        <span>long long long long long long text</span>      </div>    </div>  </div></div>

但我真的不喜欢这个解决方案.

有没有办法只使用flex属性来修复它？

解决方法 d性项目的初始设置是min-wIDth：auto.这意味着d性项目不能短于其内容的宽度.

你有文本元素的white-space：nowrap.因此,所有d性项目祖先必须扩展(以多米诺骨牌效应)以适应文本的长度.

受影响的d性项目是：

> .List-component
> .header-container
> .header-text

因此,为了防止文本溢出主容器,您需要覆盖min-wIDth：auto default. flexBox规范提供了两种方法：

>添加最小宽度：0以弯曲项目
>向flex项目添加除可见以外的任何值的溢出. (这就是为什么你能够通过添加overflow：hIDden来解决这个问题的原因.它实际上是一个干净而有效的解决方案.)

在这篇文章中更详细地解释了这种行为：

> Why doesn’t flex item shrink past content size?

.List-header {  display: flex;  wIDth: 150px;  height: 80px;  background-color: #ececec;}.List-component {  display: flex;  flex: 1;  padding-left: 24px;  padding-right: 24px;  min-wIDth: 0;         /* NEW */}.header-container {  display: flex;  flex: 1;  min-wIDth: 0;         /* NEW */}.header-text {  display: flex;  flex-direction: column;  justify-content: center;  min-wIDth: 0;         /* NEW */}span {  text-overflow: ellipsis;  white-space: nowrap;  overflow: hIDden;}

<div >  <div >    <div >      <div >        <span>long long long long long long text</span>      </div>    </div>  </div></div>

总结

以上是内存溢出为你收集整理的html – 将孩子装入父母全部内容，希望文章能够帮你解决html – 将孩子装入父母所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。