flexbox wrap and overflow ellipsis

Question

I have this fragment:

.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>

How to make flexbox wrap only for flexcol-content width and ignore flexcol-header width, making its text overflow hidden and ellipsed?

this is what I want to achieve, but with ellipsis:

.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>

Note that this is just a minimal example, but in real world I'm using server generated rows with dynamic columns.

So I don't know beforehand how many columns there are in a row and how large they are.

Thanks

Answer 1

Yo may try like this,

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