Flex wrapper NOT expanding when content overflows

Question

I'm trying to create a Table-like structure using CSS Flex. The user will be able to add/remove cols at will (via javascript). Some columns have fixed width (like first and second), the others are variable in width and will have at least a minimum width to make its text readable.

Everything is working fine, except for one thing: When the sum of the width of the displayed columns is bigger than the width of the Flex container, an overflow happens (which is fine), BUT the row won't expand accordingly and will retain the original width.

What I want to achieve is that the red and white borders (.row-item) expand accordingly to wrap the cells inside.

I read something about setting a min-width:0 but I didn't manage to make it work. I'd appreciate any help :)

Regards

body, html {
  background: grey;
  margin: 0;
  font-size: 10px;
}

.text-overflow-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipses;
}

.app {
  background: orange;
  width: 90%;
  height: 90vh;
  margin: 0 auto;
  padding: 10px;
}

.check-list-results .check-list-section, .check-list-results .check-list-section .row-list, .check-list-results .check-list-section .fixed-header-table-section.row-list, .check-list-results .check-list-section .body-table-section.row-list {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.check-list-results .check-list-section {
  border: solid green 6px;
  background: blue;
  text-align: left;
  height: 100%;
  font-weight: 500;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;

}
.check-list-results .check-list-section div {
  background: rgba(255, 255, 255, 0.4);
  border: solid 2px white;
  margin: 5px;
}
.check-list-results .check-list-section .row-list {
  border: red solid 2px;
  margin-top: 10px;
}
.check-list-results .check-list-section .row-item {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.check-list-results .check-list-section .row-item > .cell { 
  flex: 1 0 300px; /* changing auto to a number like 300px will cause cells overflow the row */
  border: none;
  padding: 1.4rem 0.8rem;
  text-align: left;
  box-sizing: border-box;
  font-weight: 400;
  font-size: 1.4rem;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.check-list-results .check-list-section .row-item > .cell:first-child {
  border-left: solid 0.4rem #00a49d;
}
.check-list-results .check-list-section .row-item > .cell.checkbox {
  align-self: stretch;
}
.check-list-results .check-list-section .row-item > .cell.checkbox > span {
  display: inline-block;
}
.check-list-results .check-list-section .row-item > .cell.checkbox:before {
  content: "";
  width: 0px;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.check-list-results .check-list-section .fixed-header-table-section {
  background: #33353f;
}
.check-list-results .check-list-section .fixed-header-table-section.row-list {
  flex-basis: 100px;
  justify-content: center;
}
.check-list-results .check-list-section .fixed-header-table-section.row-list .checkbox {
  flex: 0 0 4.8rem;
  text-align: center;
}
.check-list-results .check-list-section .fixed-header-table-section.row-list .hash {
  flex: 0 0 4.8rem;
  text-align: center;
}
.check-list-results .check-list-section .fixed-header-table-section.row-list .part-description {
  flex: 0 0 16rem;
}
.check-list-results .check-list-section .body-table-section.row-list {
  justify-content: flex-start;
}
.check-list-results .check-list-section .body-table-section.row-list .checkbox {
  flex: 0 0 4.8rem;
  text-align: center;
}
.check-list-results .check-list-section .body-table-section.row-list .hash {
  flex: 0 0 4.8rem;
  text-align: center;
  align-self: stretch;
}
.check-list-results .check-list-section .body-table-section.row-list .part-description {
  flex: 0 0 16rem;
}


.check-list-results {
  height: 100%;
  width: 800px;
}


.body-table-section .cell.hash span {
  position: relative;
}
.body-table-section .cell.hash.bottom-lines:after {
  content: "";
  position: absolute;
  left: 50%;
  background: black;
  width: 50%;
  right: 0;
  height: 1px;
  top: 50%;
}
.body-table-section .cell.hash.bottom-lines:before {
  top: 0;
  bottom: 0;
  left: 50%;
  content: "";
  position: absolute;
  background: #444854;
  width: 1px;
  z-index: 0;
}
.body-table-section .cell.hash.checklist-numbered-circle-long {
  padding-top: calc(1.4rem - 0.4rem) !important;
  padding-bottom: calc(1.4rem - 0.4rem) !important;
}
.body-table-section .cell.hash.checklist-numbered-circle-long.checklist-row-parent-lines:before {
  bottom: 0;
  content: "";
  position: absolute; 
  left: 50%;
  top: 50%;
  width: 1px;
  z-index: 0;
}
.body-table-section .cell.hash.checklist-numbered-circle-long.checklist-row-parent-lines:after {
  content: "";
  background: blue;
  width: 0px;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.body-table-section .cell.hash.checklist-numbered-circle-long span:first-child {
  display: inline-block;  
  width: 3rem;
  padding: 0.4rem 0;
}

<div class="app">
 <div id="check-list-results" class="check-list-results">
  
  <div class="check-list-section">

   <div class="fixed-header-table-section row-list">

    <div class="row-item">
     <div class="checkbox cell" id="0">
      <span class="checklist-header-checkbox">check</span></div>

     <div class="hash cell sortable" id="1" data-sortable-id="0">
      <span class="checklist-header-sort">#</span>
     </div>

     <div class="part-description cell" id="2">
      <span class="checklist-header-description">Another column</span>
     </div>

     <div class="what-is-Some data cell" id="3">
      <span class="checklist-header-Some data">Some data</span>
     </div>
     <div class="guide-number cell" id="4">Guide number</div>
     <div class="actions cell" id="5">
      <span>actions</span></div>
    </div>
   </div>

   <div class="body-table-section row-list">

    <div class="row-item" id="0-0471-E-sp">
     <div class="checkbox cell">
      <span class="checklist-body-checkbox">check</span></div>
     <div class="hash cell checklist-numbered-circle-long checklist-row-parent-lines">
      <span>1</span>
     </div>
     <div class="part-description cell" id="2">
      <span class="checklistBodyDescription">Another column</span>
     </div>
     <div class="whatSome data cell">
      <span>Some data</span></div>
     <div class="guide-number cell">
      <span>Guide number<span></div>
     <div class="actions cell">
      <span>actions</span></div>
    </div>

    <div class="row-item" id="1-0471-E-sp">
     <div class="checkbox cell">
      <span class="checklist-body-checkbox">check</span></div>
     <div class="hash cell">
      <span></span>
     </div>
     <div class="part-description cell" id="2">
      <span class="checklistBodyDescription" style="font-size: 34px">hIGHER</span>
     </div>
     <div class="whatSome data cell">
      <span>Some data</span></div>
     <div class="guide-number cell">
      <span>Guide number<span></div>
     <div class="actions cell">
      <span>actions</span></div>
    </div>

    <div class="row-item" id="2-0861-E-sp">
     <div class="checkbox cell">
      <span class="checklist-body-checkbox">check</span></div>
     <div class="hash cell">
      <span>3</span>
     </div>
     <div class="part-description cell" id="2">
      <span class="checklistBodyDescription">Another column</span>
     </div>
     <div class="whatSome data cell">
      <span>Some data</span>
     </div>
     <div class="guide-number cell">
      <span>Guide number<span>
     </div>
     <div class="actions cell">
      <span>actions</span></div>
    </div>

   </div>
  </div>

 </div>

So guide number and actions should wrap to the next line? is that what you want? Your question is a little confusing, I am unsure if you want the items to wrap or some other expanding behaviour. You should check your markup as well, there are some missing `/` so some tags are unclosed — Huangism, Jul 30 '18 at 15:07
I think this may explain the fundamental problem: https://stackoverflow.com/q/45497031/3597276 — Michael Benjamin, Jul 30 '18 at 15:16
An alternative may be `overflow: auto` applied to `.row-item`. https://jsfiddle.net/j4okyh5e/2/ — Michael Benjamin, Jul 30 '18 at 15:18
@Huangism. In fact, what I'd like is that the red-border Expands to the right, so that the 'cells' that are too big and cause overflow are wrapped inside this red border. Hope this clarifies :) — Barleby, Jul 31 '18 at 07:17
@Michael_B your fix adds 1 scroll bar per item/row. I need the same thing but for the whole block of rows. This is, only 1 scroll bar at the bottom for all items. Still, don't understand whay the Wrapper(red border) doesn't expand when content is overflown. — Barleby, Jul 31 '18 at 07:22

Flex wrapper NOT expanding when content overflows

0 Answers0