让孩子融入父母 [英] Fitting child into parent

查看：23
本文介绍了让孩子融入父母的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在底部嵌套了带有文本的 flex 元素.顶部元素的固定宽度小于文本:

.list-header {显示:弹性；宽度:150px；高度:80px；背景颜色:#ececec；}.list 组件 {显示:弹性；弹性:1；左边距:24px；填充右:24px；}.header-容器{显示:弹性；弹性:1；}.标题文本 {显示:弹性；弹性方向:列；对齐内容:居中；溢出:隐藏；}跨度 {文本溢出:省略号；空白:nowrap；溢出:隐藏；}

<div class="list-component"><div class="header-container"><div class="header-text"><span>long long long long long long long text</span>

我可以通过将 overflow: hidden; 应用到所有元素来解决这个问题:

.list-header {显示:弹性；宽度:150px；高度:80px；背景颜色:#ececec；}.list 组件 {显示:弹性；弹性:1；左边距:24px；填充右:24px；溢出:隐藏；}.header-容器{显示:弹性；弹性:1；溢出:隐藏；}.标题文本 {显示:弹性；弹性方向:列；对齐内容:居中；溢出:隐藏；}跨度 {文本溢出:省略号；空白:nowrap；溢出:隐藏；}

<div class="list-component"><div class="header-container"><div class="header-text"><span>long long long long long long long text</span>

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

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

解决方案

弹性项目的初始设置是 min-width: auto.这意味着弹性项目不能短于其内容的宽度.

文本元素上有 white-space: nowrap.因此，所有 flex 项祖先都必须扩展(在多米诺骨牌效应中)以适应文本的长度.

受影响的弹性项目是:

因此，为了防止文本溢出主容器，您需要覆盖 min-width: auto 默认值.flexbox 规范提供了两种方法来做到这一点:

  1. 将 min-width: 0 添加到弹性项目
  2. 使用除 visible 之外的任何值添加 overflow 以弹性项目.(这就是为什么您能够通过添加 overflow: hidden 来解决问题.这实际上是一个干净有效的解决方案.)

这篇文章更详细地解释了这种行为:

.list-header {显示:弹性；宽度:150px；高度:80px；背景颜色:#ececec；}.list 组件 {显示:弹性；弹性:1；左边距:24px；填充右:24px；最小宽度:0；/* 新的 */}.header-容器{显示:弹性；弹性:1；最小宽度:0；/* 新的 */}.标题文本 {显示:弹性；弹性方向:列；对齐内容:居中；最小宽度:0；/* 新的 */}跨度 {文本溢出:省略号；空白:nowrap；溢出:隐藏；}

<div class="list-component"><div class="header-container"><div class="header-text"><span>long long long long long long long text</span>

I have nested flex elements with a text at the bottom. The top element has fixed width that is smaller than text:

.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 class="list-header">
  <div class="list-component">
    <div class="header-container">
      <div class="header-text">
        <span>long long long long long long text</span>
      </div>
    </div>
  </div>
</div>

I can fix this by applying overflow: hidden; to all elements:

.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 class="list-header">
  <div class="list-component">
    <div class="header-container">
      <div class="header-text">
        <span>long long long long long long text</span>
      </div>
    </div>
  </div>
</div>

But I don't really like this solution.

Is there are way to fix it using only flex properties?

解决方案

An initial setting on flex items is min-width: auto. This means that flex items cannot be shorter than the width of their content.

You have white-space: nowrap on the text element. As a result, all flex item ancestors must expand (in a domino effect) to accommodate the length of the text.

The affected flex items are:

Therefore, in order to prevent the text from overflowing the primary container, you need to override the min-width: auto default. The flexbox spec provides two methods for doing this:

  1. Add min-width: 0 to flex items
  2. Add overflow with any value other than visible to flex items. (This is why you were able to fix the problem by adding overflow: hidden. It's actually a clean and valid solution.)

This behavior is explained in more detail in this post: 

.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 class="list-header">
  <div class="list-component">
    <div class="header-container">
      <div class="header-text">
        <span>long long long long long long text</span>
      </div>
    </div>
  </div>
</div>

这篇关于让孩子融入父母的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆