填充剩余空间，直到最大宽度 [英] Fill remaining space until max width

问题描述

我需要制作一个包含两个元素的面板标题.第一个获得大部分空间，而第二个仅获得他需要的空间.

I need to make a panel title with two elements. The first one gets most of the space, while the second gets only the one he needs.

结构如下:

.flex-child> display: flex
    .child-1 > flex-grow: 1
    .child-2 > align-self: center

出于样式的原因，第一个元素的文本为white-space: nowrap，如果大于父元素则显示省略号.但是具有display: flex的父级并没有将元素限制为其可用空间.

For stylinng reasons, the first element has a text with white-space: nowrap, to show ellipsis if greater than the parent. But the parent with display: flex is not limiting the element to its available space.

下面的代码段显示了 1)时第一个元素包含大量文本的元素的样子； 2):第一个元素的文字数量合理；和 3)，我希望元素显示如何，但是只能使用max-width这样的幻数.带有相同代码的小提琴: https://jsfiddle.net/mjtf4ec3/1/.

The code snippet bellow shows how the element is when 1) the first element has a lot of text; 2) the first element has a reasonable amount of text; and 3) how I would like the element to appear, but am only being able to do with a magic number as max-width. A fiddle with the same code: https://jsfiddle.net/mjtf4ec3/1/.

.fixed-width-parent {
  margin: 1em 2em;
  width: 300px;
  background: #dedede;
  padding: 15px;
}

.unbreakable-text {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flex-child {
  display: flex;
}

.child-1 {
  flex-grow: 1;
}

.child-2 {
  align-self: center;
  margin-left: 5px;
}

.fancy-button {
  padding: 5px;
  background-color: #1a1;
  border: 1px solid #080;
  border-radius: 5px;
  color: #fff;
}

.expectation .child-1 {
  min-width: 80%;
}

.unimportant {
  color: #bbb;
}

body {
  font-family: sans-serif;
  font-size: 14px;
}

<div class="fixed-width-parent">
  <div class="flex-child">
    <div class="child-1">
      <div class="unbreakable-text">
      <strong>Very long text NOT OK</strong>
        Lorem ipsum dolor sit amet, consectetur
      </div>
      <div class="unimportant">Unimportant text
        <br> Very unimportant</div>
    </div>
    <div class="child-2">
      <div class="fancy-button">
        Button
      </div>
    </div>
  </div>
</div>

<div class="fixed-width-parent">
  <div class="flex-child">
    <div class="child-1">
      <div class="unbreakable-text">
      <strong>Short text OK</strong>
      </div>
      <div class="unimportant">Unimportant text
        <br> Very unimportant</div>
    </div>
    <div class="child-2">
      <div class="fancy-button">
        Button
      </div>
    </div>
  </div>
</div>

<div class="fixed-width-parent expectation">
  <div class="flex-child">
    <div class="child-1">
      <div class="unbreakable-text">
      <strong>EXPECTATION (without <code>max-width</code> as %)</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>
      <div class="unimportant">Unimportant text
        <br> Very unimportant</div>
    </div>
    <div class="child-2">
      <div class="fancy-button">
        Button
      </div>
    </div>
  </div>
</div>

推荐答案

只需在.child-1上设置min-width: 0px，以向flexbox布局表明可以收缩该子级.这就是您真正需要的.下面的演示(仅添加了这一行).

Just set min-width: 0px on .child-1, to indicate to the flexbox layout that it is okay to shrink that child. That is all you need really. Demo below (only added this single line).

.fixed-width-parent {
  margin: 1em 2em;
  width: 300px;
  background: #dedede;
  padding: 15px;
}

.unbreakable-text {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flex-child {
  display: flex;
}

.child-1 {
  flex-grow: 1;
  min-width: 0px; /* added this */
}

.child-2 {
  align-self: center;
  margin-left: 5px;
}

.fancy-button {
  padding: 5px;
  background-color: #1a1;
  border: 1px solid #080;
  border-radius: 5px;
  color: #fff;
}

.expectation .child-1 {
  min-width: 80%;
}

.unimportant {
  color: #bbb;
}

body {
  font-family: sans-serif;
  font-size: 14px;
}

<div class="fixed-width-parent">
  <div class="flex-child">
    <div class="child-1">
      <div class="unbreakable-text">
      <strong>Very long text NOT OK</strong>
        Lorem ipsum dolor sit amet, consectetur
      </div>
      <div class="unimportant">Unimportant text
        <br> Very unimportant</div>
    </div>
    <div class="child-2">
      <div class="fancy-button">
        Button
      </div>
    </div>
  </div>
</div>

<div class="fixed-width-parent">
  <div class="flex-child">
    <div class="child-1">
      <div class="unbreakable-text">
      <strong>Short text OK</strong>
      </div>
      <div class="unimportant">Unimportant text
        <br> Very unimportant</div>
    </div>
    <div class="child-2">
      <div class="fancy-button">
        Button
      </div>
    </div>
  </div>
</div>

<div class="fixed-width-parent expectation">
  <div class="flex-child">
    <div class="child-1">
      <div class="unbreakable-text">
      <strong>EXPECTATION (without <code>max-width</code> as %)</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>
      <div class="unimportant">Unimportant text
        <br> Very unimportant</div>
    </div>
    <div class="child-2">
      <div class="fancy-button">
        Button
      </div>
    </div>
  </div>
</div>

这篇关于填充剩余空间，直到最大宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！