Flexbox子项可以收缩到一定程度(但如果不需要，则不要扩展) [英] Flexbox children shrink up to a certain point (but don't expand if they don't need to)

问题描述

我在这里有点问题.我有一个Flexbox容器，上面有不同大小的孩子.根据数量及其内容，子级可能会溢出父级.

I'm a having a bit of an issue here. I have a flexbox container with children of different sizes. Based on quantity and their content children might overflow the parent.

我想要的是让孩子们收缩，以便他们尝试适应在父容器中.我通过向孩子添加收缩和溢出属性来做到这一点.到目前为止一切顺利.

What I want is the children to shrink so they try to fit in the parent container. I did that by adding shrink and overflow properties to the children. So far so good.

.container > div {
  background-color: orange;
  padding: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}

我最终得到这样的东西:

I end up with something like this:

现在，我希望它们缩小但可以缩小到一定程度(假设为80像素).我不在乎它们是否最终会导致容器溢出，但是我不想渲染任何小于80px的像素.

Now I want them to shrink but up to a certain point (lets say 80px). I don't care if they end up overflowing the container but I don't want to render any smaller than 80px.

当然，我给孩子们加了min-width: 80px ...但这是我的问题.我希望孩子们缩小到80像素，但我不希望那些已经小于80像素的孩子(例如Child1，Child4和Child5)不希望它们被min-width属性扩大(或者，我希望他们进一步缩小到min-content)

Of course, I added min-width: 80px to the children... but here is my problem. I want the children to shrink up to 80px but I don't want any of those that were smaller than 80px already (like Child1, Child4 and Child5) I don't want them to be enlarged by the min-width property (or, I want them to shrink further up to min-content)

换句话说.我不要这个:

In other words. I don't want this:

我很想吃这样的东西:

我尝试做类似min-width: min(min-content, 80px)的操作，但是当然没有用.

I tried doing something like min-width: min(min-content, 80px) but of course, didn't work.

这是一个带有问题的小型Codepen: https://codepen.io/claudiofpen/pen/QWELVJO

Here is an small codepen with the issue: https://codepen.io/claudiofpen/pen/QWELVJO

.container {
  width: 300px;
  border: 1px solid black;
  display: flex;
  flex-direction: row;
  padding: 5px;
}
.container > div {
  background-color: orange;
  padding: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: min-content;
}
.container > div:not(:last-child) {
  margin-right: 5px;
}

/* I don't want the following css classes, I cannot 
 tell in before hand which children are going to have 
 a larger content */
.container > div:nth-child(2), 
.container > div:nth-child(3) {
  min-width: 80px;
}

<div class="container">
  <div>Child 1</div>
  <div>Longer Child 2</div>
  <div>Longer Child 3</div>
  <div>Child 4</div>
  <div>Child 5</div>
</div>

推荐答案

Temani Afif 的解决方案解决了确保文本元素不会缩小到指定宽度以下的问题，除非其固有宽度已经低于该宽度(在这种情况下，它将其固有宽度用作呈现的宽度).但是，除非所有子元素的指定宽度之和超过容器的宽度，否则它不起作用.

Temani Afif's solution solves the problem of ensuring that a text element will not shrink below the specified width unless its intrinsic width is already below that width (in which case it uses its intrinsic width as the rendered width). But it does not work unless the sum of the specified widths of all the child elements exceeds the container's width.

因此，我尝试为每个外部元素提供一个flex-grow参数，以便在容器有空间的情况下，它们可以增长到其指定的宽度以上.但是，我还将外部元素的最大宽度设置为其固有的最大内容宽度，因此它们永远不会超出文本的实际大小.因此，我在包装的div中添加了以下样式.

So I tried giving each outer elements a flex-grow parameter, so that they would grow above their specified width, if the container had room. But I also give the outer elements a maximum width set to their intrinsic maximum content width, so they would never grow beyond the actual size of the text. Thus I added the following styles to the wrapping div.

 flex: 1 1 auto;
 max-width: max-content;

通过这种调整，我相信它可以解决整个问题.如果容器中有空间，元素将完全展开.随着我们添加更多元素，更长的元素开始缩小.但是它们永远不会缩小到指定的宽度以下，因此一旦所有插入的元素缩小到该宽度，容器就会溢出.但是以较短的宽度开头的元素根本不会弯曲.

With that tweak I believe it solves the entire problem. The elements expand fully if there is room in the container. As we add more elements the longer elements start to shrink. But they never shrink below their specified width, so the container overflows once all inserted elements have shrunk down to that width. But elements that started with a shorter width never flex at all.

我在下面添加了一个示例.

I have added an example below.

.container {
  width: 340px;
  border: 1px solid black;
  display: flex;
  flex-direction: row;
  padding: 5px;
}

.container>div {
  background-color: orange;
  padding: 5px;
  flex: 1 1 auto;
  width: 80px;
  max-width: max-content;
}

.container>div>div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}

.container>div:not(:last-child) {
  margin-right: 5px;
}

<h5>When the items fit they expand to their intrinsic length</h5>
<div class="container">
  <div>
    <div>Medium length</div>
  </div>
  <div>
    <div>Tiny</div>
  </div>
  <div>
    <div>Longer text element</div>
  </div>
</div>
<h5>When the container limit is reached the longer elements start shrinking</h5>
<div class="container">
  <div>
    <div>Medium length</div>
  </div>
  <div>
    <div>Tiny</div>
  </div>
  <div>
    <div>Longer text element</div>
  </div>
  <div>
    <div>Filler</div>
  </div>
</div>
<h5>Adding more elements...</h5>
<div class="container">
  <div>
    <div>Medium length</div>
  </div>
  <div>
    <div>Tiny</div>
  </div>
  <div>
    <div>Longer text element</div>
  </div>
  <div>
    <div>Filler</div>
  </div>
  <div>
    <div>Filler</div>
  </div>
</div>
<h5>When there is no room it overflows<br> The tiny element stays at its intrinsic width, but the bigger elements stop shrinking at the specified width</h5>
<div class="container">
  <div>
    <div>Medium length</div>
  </div>
  <div>
    <div>Tiny</div>
  </div>
  <div>
    <div>Longer text element</div>
  </div>
  <div>
    <div>Filler</div>
  </div>
  <div>
    <div>Filler</div>
  </div>
  <div>
    <div>Filler</div>
  </div>
</div>

这篇关于Flexbox子项可以收缩到一定程度(但如果不需要，则不要扩展)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！