Question

我有一个页面，该页面分为侧边栏和具有flex显示的内容，其中侧边栏具有0.15 flex和内容0.85。此页面应为视口的全宽。

我的问题是，当我尝试将表添加到页面内容中时，我想让表适合父div，在我们的情况下，它是内容，并且如果表不合适，则具有水平滚动条。

>

当前，表格使内容仅在水平方向伸展，这不是我想要的。我希望能够缩小窗口的大小，例如表也应缩小。

例如，请检查js小提琴：

我的代码如下：

.page {
  width: 100%;
  height: 100%;
  display: flex;
}

.sidebar {
  flex: 0.15;
  background-color: red;
}

.content {
  flex: 0.85;
  background-color: blue;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.step-content {
  flex: 1;
}

.step-footer {
  display: block;
}

table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

button {
  display: block;
}

  <div class="page">
    <div class="sidebar">
      // sidebar buttons
    </div>
    <div class="content">
      <div class="step-content">
        whatever
        <div>
          <table>
            // BIG TABLE THAT STRETCHS WHOLE PAGE CONTENT
          </table>
        </div>
      </div>
      <div class="step-footer">
      </div>
    </div>
</div>

Answer 1

.flex-container {
    display: flex;
    flex-wrap: nowrap;
}

.flex-container > div {
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
}

HTML

<div class="flex-container">
    <div class="sidebar">1</div>
    <div class="content">            
        <table>
            /// table code
        </table>
    </div>
</div>

水平滚动表格以适合和缩小父对象

1 个答案: