flexbox包装和溢出省略号

Question

我有这个片段：

.flexrow {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
}

.flexcol {
  border: 0;
  margin: 0 1px;
  min-height: 48px;
  flex-grow: 1.0;
}

.flexcol-header {
  padding: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flexcol-content {
  padding: 4px;
  vertical-align: top;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="flexrow">
  <div class="flexcol">
    <div class="flexcol-header">
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
    </div>
    <div class="flexcol-content">
      <input type="text">
    </div>
  </div>
  <div class="flexcol">
    <div class="flexcol-header">
      BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
    </div>
    <div class="flexcol-content">
      <input type="text">
    </div>
  </div>
</div>

如何为flexcol-content宽度和忽略 flexcol-header宽度设置flexbox wrap ，使其文本溢出隐藏和省略？

这是我想要实现的目标，但省略号：

.flexcol-header-text {
  width: 0;
  overflow: visible;
}

.flexcol-header-wrapper {
  overflow: hidden;
  text-overflow: ellipsis; /******* THIS does not work ************/
}

.flexrow {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
}

.flexcol {
  border: 0;
  margin: 0 1px;
  min-height: 48px;
  flex-grow: 1.0;
}

.flexcol-header {
  padding: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flexcol-content {
  padding: 4px;
  vertical-align: top;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="flexrow">
  <div class="flexcol">
    <div class="flexcol-header-wrapper">
      <div class="flexcol-header-text">
        AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
      </div>
    </div>
    <div class="flexcol-content">
      <input type="text">
    </div>
  </div>
  <div class="flexcol">
    <div class="flexcol-header-wrapper">
      <div class="flexcol-header-text">
        BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
      </div>
    </div>
    <div class="flexcol-content">
      <input type="text">
    </div>
  </div>
  <div class="flexcol">
    <div class="flexcol-header-wrapper">
      <div class="flexcol-header-text">
        CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
      </div>
    </div>
    <div class="flexcol-content">
      <input type="text" size="4">
    </div>
  </div>
</div>

请注意，这只是一个最小的示例，但在现实世界中，我正在使用带有动态列的服务器生成的行。

所以我事先并不知道连续多少列以及它们有多大。

由于

Answer 1

哟可能会这样试试，

.flexcol {
  border: 0;
  min-height: 48px;
  overflow: hidden;
  flex-grow: 1;
  flex: 0 0 48%;
  box-sizing: border-box;
  margin: 0 1%;
}