Question

我正在尝试为虚拟表创建布局。一个虚拟表将放置在.table-body元素内。每个表单元格都与.table-header中的单元格具有相同的Flex布局样式，因此具有相同的父元素的外观将相同。问题在于.table-cell元素不会拉伸.table-header的宽度，而.table-header元素不会拉伸.table-container的宽度。

我正在尝试获取.table-cell，以提供.table-header和.table-container的宽度。而.table-body将占据.table-container

中的剩余空间

这是 Codesandbox 。

.table-wrapper {
  width: 500px;
  height: 300px;
  overflow-x: scroll;
  background: rgba(255, 255, 0, 0.2);
}

.table-container {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  height: 100%;
  
  /* If you uncomment next line, you see what I'm trying to achieve */
  /* min-width: 1100px; */
  
  background: rgba(0, 255, 0, 0.3);
}

.table-header {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  flex: 0 0 auto;
  
  background: rgba(255, 100, 0, 0.3);
}

.table-cell {
  min-width: 100px;
  display: flex;
  flex: 1 1 auto;
  height: 30px;
  line-height: 30px;
  
  border: 1px solid blue;
}

.table-body {
  display: flex;
  flex: 1 1 auto;
  
  border: 1px solid red;
  background: rgba(255, 0, 0, 0.3);
}

<div class="table-wrapper">
  <div class="table-container">
    <div class="table-header">
      <div class="table-cell" style="flex: 0 0 180px;">header-cell 1</div>
      <div class="table-cell">header-cell 2</div>
      <div class="table-cell">header-cell 3</div>
      <div class="table-cell">header-cell 4</div>
      <div class="table-cell" style="flex: 0 0 200px;">header-cell 5</div>
      <div class="table-cell">header-cell 6</div>
      <div class="table-cell">header-cell 7</div>
    </div>
    <div class="table-body">virtual table here</div>
  </div>
</div>

Answer 1

考虑使用const useAction = <Args extends any[], Action extends PayloadAction<any, any>>( actionCreator: (...args: Args) => Action ): (...args: Args) => Promise<Action['payload']> => { const dispatch = useDispatch<(action: any) => Promise<any>>(); // * Note Promise<any> return useCallback(async (...args: Args) => { return dispatch(actionCreator(...args)) .then(result => { return unwrapResult(result) // @reduxjs/toolkit }) .catch(err => { return Promise.reject(err) }) }, [dispatch]) }而不是inline-flex，并使用flex而不是width定义宽度

flex-basis

.table-wrapper {
  width: 500px;
  height: 300px;
  overflow-x: scroll;
  background: rgba(255, 255, 0, 0.2);
}

.table-container {
  display: inline-flex; /* UPDATED */
  flex-flow: column nowrap;
  min-width: 100%; /* UPDATED */
  height: 100%;
  background: rgba(0, 255, 0, 0.3);
}

.table-header {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  flex: 0 0 auto;
  
  background: rgba(255, 100, 0, 0.3);
}

.table-cell {
  min-width: 100px;
  display: flex;
  flex: 1 1 auto;
  height: 30px;
  line-height: 30px;
  
  border: 1px solid blue;
}

.table-body {
  display: flex;
  flex: 1 1 auto;
  
  border: 1px solid red;
  background: rgba(255, 0, 0, 0.3);
}

Answer 2

这是我发现的解决方法，对表头和表容器都使用width: min-content;。
仅当您摆脱table-cell中的内联样式时，此方法才有效。

.table-wrapper {
  width: 500px;
  height: 300px;
  overflow-x: scroll;
  background: rgba(255, 255, 0, 0.2);
}

.table-container {
  display: flex;
  flex-flow: column nowrap;
  width: min-content;
  height: 100%;
  
  /* If you uncomment next line, you see what I'm trying to achieve */
  /* min-width: 1100px; */
  
  background: rgba(0, 255, 0, 0.3);
}

.table-header {
  display: flex;
  flex-flow: row nowrap;
  width: min-content;
  flex: 0 0 auto;
  
  background: rgba(255, 100, 0, 0.3);
}

.table-cell {
  min-width: 100px;
  display: flex;
  flex: 1 1 auto;
  height: 30px;
  line-height: 30px;
  
  border: 1px solid blue;
}

.table-body {
  display: flex;
  flex: 1 1 auto;
  
  border: 1px solid red;
  background: rgba(255, 0, 0, 0.3);
}

<div class="table-wrapper">
  <div class="table-container">
    <div class="table-header">
      <div class="table-cell">header-cell 1</div>
      <div class="table-cell">header-cell 2</div>
      <div class="table-cell">header-cell 3</div>
      <div class="table-cell">header-cell 4</div>
      <div class="table-cell" >header-cell 5</div>
      <div class="table-cell">header-cell 6</div>
      <div class="table-cell">header-cell 7</div>
    </div>
    <div class="table-body">virtual table here</div>
  </div>
</div>

水平滚动容器内的flexbox宽度

2 个答案: