当内容溢出时，Flex包装器不会扩展

我正在尝试使用CSS Flex创建一个类似于Table的结构 . 用户可以随意添加/删除cols（通过javascript） . Some columns have fixed width （如第一个和第二个）， others are variable in width 并且至少具有最小宽度以使其文本可读 .

一切正常，除了一件事：当显示列的宽度总和大于Flex容器的宽度时， an overflow happens （很好），但是 the row won't expand accordingly 并将保留原始宽度 .

我想要实现的是红色和白色边框（.row-item）相应地扩展以包裹细胞 .

我读了一些关于设置最小宽度的东西：0但我没有设法让它工作 . 我很感激任何帮助:)

问候

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>