Flexbox table header 左对齐被滚动条破坏

Question

我正在使用 flexbox 创建 table。它具有固定的 header 和可滚动的 body。在 Windows 上，当使用 overflow-y: auto 将滚动条添加到 body 时，header 和行之间的左对齐被打破。因为在 windows 上，滚动条从 body 中获取了一些额外的 space，但是 header 仍然是相同的 space。当滚动条添加到 body 时，有什么方法可以使 header 宽度压缩？

我想确保 header 和 body 的宽度在滚动条存在时和不存在时都相同。

    &__item, &--header__item {
      position: relative;
      flex-basis: 20%;
      flex-grow: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      &.sm, &.lg {
        flex-grow: 0;
      }
      &.sm {
        flex-basis: 40px;
      }
    }

<!-- Header HTML -->

    <ul class="table-list-container">
      <li class="table-list-row">
        <ul class="table-list header">
          <li class="table-list&#45;&#45;header__item sm text-center">
          </li>
          <li class="table-list&#45;&#45;header__item md-padding-left-10">
            Header 1
          </li>
          <li class="table-list&#45;&#45;header__item">
            Header 2
          </li>
          <li class="table-list&#45;&#45;header__item">
            Header 3
          </li>
          <li class="table-list&#45;&#45;header__item text-center">
            Header 4
          </li>
        </ul>
      </li>
    </ul>

<!-- Body HTML -->

    <div style="height: 305px" class="scrollable">
      <ul class="table-list-container">
        <li class="table-list-row">
          <ul class="table-list body">
            <li class="table-list__item sm text-center">
              <input type="checkbox">
            </li>
            <li class="table-list__item md-padding-left-10">Data</li>
            <li class="table-list__item">Data</li>
            <li class="table-list__item">Data</li>
            <li class="table-list__item text-center">Data</li>
          </ul>
        </li>
      </ul>
    </div>

Answer 1

这是一个有效的 Demo

body{
 margin: 0;
}
.table{
 display: flex;
 flex-wrap: wrap;
}
ul{
 display: flex;
 width: 100%;
 list-style: none;
 padding: 0;
 margin: 0;
}
li{
 flex: 5;
 /* width: 15%; */
 padding: 10px;
}
.scrollable{
 width: 100%;
 margin-top: 80px;
}
li.empty{
 /* max-width: 12px; */
 flex:1;
}
.header{
 position: fixed;
 height: 80px;
 z-index: 5;
 background: red;
}

<div class="table">

 <ul class="table-list-container header">
  <li class="table-list-row">
   <ul class="table-list header">
    <li class="table-list&#45;&#45;header__item sm text-center empty">
    </li>
    <li class="table-list&#45;&#45;header__item md-padding-left-10">
     Header 1
    </li>
    <li class="table-list&#45;&#45;header__item">
     Header 2
    </li>
    <li class="table-list&#45;&#45;header__item">
     Header 3
    </li>
    <li class="table-list&#45;&#45;header__item text-center">
     Header 4
    </li>
   </ul>
  </li>
 </ul>

 <div style="height: 305px" class="scrollable">
  <ul class="table-list-container"> 
   <li class="table-list-row">
    <ul class="table-list body">
     <li class="table-list__item sm text-center empty">
      <input type="checkbox">
     </li>
     <li class="table-list__item md-padding-left-10">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
     <li class="table-list__item">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
     <li class="table-list__item">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
     <li class="table-list__item text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
    </ul>
   </li>
  </ul>
 </div>
</div>

Answer 2

overflow-y: overlay;

对我有用。由于现在滚动条将从现有的 table space 中获取 space 而不是额外的 space，因此列 headers 和行完全对齐。

注意：添加滚动条后，您需要确保最后一列有足够的 space 来显示其内容，因为滚动条就是从那里获取其 space。

Flexbox table header 左对齐被滚动条破坏

Flexbox table header left alignment broken with scrollbar

html

css

flexbox

flextable