使弹性行拉伸到单元格中内容的高度 - 内容从容器中溢出 DIV

Question

我通常会问有关 Angular 的问题，但今天我有一个有关 CSS 和 FlexBox 的问题。在我的应用程序中，我在界面、用户名、公司名称和部门名称上显示一些信息，如果信息很长（比如一个有很多字符的长名称），我希望文本包含在它的单元格和显示文本的行中在增长以适应文本。文本不应渗入下一行。

我的HTML看起来是这样的...

<div class="assignment">
  <!-- Here we want to colums, one to contain the rows of info
      The other to contain a single button -->
  <div class="assignment__details">
    <div class="assignment__row">
      <div class="assignment__row__title">User</div>
      <div class="assignment__row__value">
        Oh this is a long user name
      </div>
    </div>
    <div class="assignment__row">
      <div class="assignment__row__title">Company:</div>
      <div class="assignment__row__value">
        Oh this is a long company name
      </div>
    </div>
    <div class="assignment__row">
      <div class="assignment__row__title">Department:</div>
      <div class="assignment__row__value" >
        This is Such a long Department Name
      </div>
    </div>
  </div>
  <!-- here is the col with the button -->
  <div class="assignment__controls">
    <button mat-icon-button (click)="doSomething()">
      <mat-icon>edit</mat-icon>
    </button>
  </div>
</div>

这里是我的CSS（用BEM写的比较少）

.assignment {
  display: flex;
  background-color: #C0C0C0;
  padding: 10px;
  width: 300px; // just for demo puropses

  &__details {
    flex: 1 1 80%;
  }

  &__controls {
    display: flex;
    flex: 1 1 20%;
    justify-content: flex-end;
    align-items: center;
  }

  &__row {
    display: flex;
    height: 21px;

    &__title {
      flex: 1 0 50%;
    }

    &__value {
      flex: 1 0 50%;
    }
  }
}

这是一个JS Binhttps://jsbin.com/juguvovelo/edit?html,css,output

如您所见，文本渗入下面的行并渗出容器！正如这个屏幕截图所示！我正在设置 .assignment__row 的 flex-grow，但似乎没有得到我想要的效果？

如果有人能帮我解决这个问题，我将不胜感激。也许是我的 HTML 结构有问题？

Answer 1

从 assignment__row

中删除 height

.assignment {
  display: flex;
  background-color: #c0c0c0;
  padding: 10px;
  width: 300px;
}
 .assignment__details {
  flex: 1 1 80%;
}
 .assignment__controls {
  display: flex;
  flex: 1 1 20%;
  justify-content: flex-end;
  align-items: center;
}
 .assignment__row {
  display: flex;
}
 .assignment__row__title {
  flex: 1 0 50%;
}
 .assignment__row__value {
  flex: 1 0 50%;
}

<div class="assignment">
  <!-- Here we want to colums, one to contain the rows of info
      The other to contain a single button -->
  <div class="assignment__details">
    <div class="assignment__row">
      <div class="assignment__row__title">User</div>
      <div class="assignment__row__value">
        Oh this is a long user name
      </div>
    </div>
    <div class="assignment__row">
      <div class="assignment__row__title">Company:</div>
      <div class="assignment__row__value">
        Oh this is a long company name
      </div>
    </div>
    <div class="assignment__row">
      <div class="assignment__row__title">Department:</div>
      <div class="assignment__row__value" >
        This is Such a long Department Name
      </div>
    </div>
  </div>
  <!-- here is the col with the button -->
  <div class="assignment__controls">
    <button mat-icon-button (click)="doSomething()">
      <mat-icon>edit</mat-icon>
    </button>
  </div>
</div>

Answer 2

您需要从 .assignment__row 中删除高度。这里有一个JSBin link.

使弹性行拉伸到单元格中内容的高度 - 内容从容器中溢出 DIV

Make flex row stretch to height of content in a cell - contents bleed out of container DIV

html

css

less

flexbox