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

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 在 table-container 里面更宽所以我想要 overflow-x: scroll。问题是，现在 table-container class 的宽度用像素 width: 900px 指定。这很好用，但我希望它能伸展到 div 和 class dashboard 的全部可用宽度。但是，如果我将 width: 100% 添加到 table-container，它会破坏布局并延伸到 div 之外 dashboard class 以及所有其他兄弟 [=41] =]s.

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

Answer 1

您在 table-container 上使用 width:100% 的想法是正确的。但也可以在 right-container 上使用 overflow: hidden （或 overflow-x ），这样布局就不会被修改。

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

.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>

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

Stretch flex item with overflowing content to the full available width of its container

css

overflow

flexbox