Question

我有这样的布局：

HTML：

<html>
  <head>
  </head>
  <body>
    <div class="container">
    <div class="left-container">
      SIDEBAR
    </div>
    <div class="right-container">
      <div class="header">
        <div class="header-item">
          HEADER ITEM 1
        </div>
        <div class="header-item">
          HEADER ITEM 2
        </div>
      </div>
      <div class="dashboard">
        <div class="nav">
          SOME INNER NAVIGATION
        </div>
        <div class="table-container">
        TABLE CONTAINER
          <div class="table">
            TABLE
          </div>
        </div>
      </div>
    </div>
    </div>
  </body>
</html>

CSS：

.container {
  display: flex;
  margin: auto;
  max-width: 1300px;
  padding: 15px;
  background: lightpink;
}

.left-container {
  width: 300px;
  background: lavender;
  margin-right: 50px;
}

.right-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.header {
  display: flex;
  background: lightblue;
  width: 100%;
}

.header-item {
  flex: 1 1 auto;
}

.dashboard {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
  max-width: 100%;
}

.nav {
  background: lightgrey;
}

.table-container {
  margin-top: 30px;
  background: lavenderblush;
  padding: 5px;
  width: 100%;
  width: 900px;
  overflow-x: scroll;

}

.table {
  background: lightsalmon;
  width: 1500px;
  height: 100px;
}

也在codepen上。

table-container内的表比较宽，所以我想拥有overflow-x: scroll。问题是，现在table-container类的宽度由像素width: 900px指定。效果很好，但我希望它可以扩展到类dashboard的div的全部可用宽度。但是，如果我将width: 100%添加到table-container，则会破坏布局并使用dashboard类以及所有其他同级div延伸到div之外。

似乎修复应该很简单，但到目前为止我还没有成功。

Answer 1

您在width:100%上使用table-container的想法是正确的。但也请在overflow: hidden上使用overflow-x（或right-container），以免更改布局。

我希望我能正确理解你想要的。请检查下面的代码段。

.container {
  display: flex;
  margin: auto;
  max-width: 1300px;
  padding: 15px;
  background: lightpink;
}

.left-container {
  width: 300px;
  background: lavender;
  margin-right: 50px;
}

.right-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow:hidden;
}

.header {
  display: flex;
  background: lightblue;
  width: 100%;
}

.header-item {
  flex: 1 1 auto;
}

.dashboard {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
  max-width: 100%;
}

.nav {
  background: lightgrey;
}

.table-container {
  margin-top: 30px;
  background: lavenderblush;
  padding: 5px;
  width: 100%;
  width: 100%;
  overflow-x: scroll;
  
}

.table {
  background: lightsalmon;
  width: 1500px;
  height: 100px;
}

    <div class="container">
    <div class="left-container">
      SIDEBAR
    </div>
    <div class="right-container">
      <div class="header">
        <div class="header-item">
          HEADER ITEM 1
        </div>
        <div class="header-item">
          HEADER ITEM 2
        </div>
      </div>
      <div class="dashboard">
        <div class="nav">
          SOME INNER NAVIGATION
        </div>
        <div class="table-container">
        TABLE CONTAINER
          <div class="table">
            TABLE
          </div>
        </div>
      </div>
    </div>
    </div>

将内容溢出的弹性项目拉伸到其容器的整个可用宽度

1 个答案: