网格内的CSS水平滚动flexbox

Question

免责声明：我已经阅读了大量几乎我的用例，但没有找到完全相同的：

我想要一个左侧边栏宽度固定的网格，右侧内容列应该只填满窗口的其余部分而不是更多。

我让它在“纯”弹性盒布局中工作，但由于某些奇怪的原因不在网格内。

发生的情况是 flex 项只会使整个网格比窗口宽并滚动整个内容。

我想要的是只有 flex 容器滚动并且上面的标题保持在原来的位置。

<style media="screen">
  * {
    margin: 0;
    padding: 0;
  }
  body {
    height: 100%;
  }
  sidebar {
    background-color: red;
    display: block;
  }
  main {
    display: grid;
    grid-template-columns: 300px auto;
    width: 100vw;
  }
  content {
    background-color: blue;
    display: block;
  }
  image-container-wrapper {
    display: block;
    overflow: scroll;
  }
  image-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  my-image {
    display: block;
    flex: 0 0 auto;
    margin-right: 3px;
    min-width: 100px;
    min-height: 100px;
    background-color: grey;
  }
</style>


<header>Header</header>
<main>
  <sidebar>This should be "fixed"
  </sidebar>
  <content>
    <h1>Slider below</h1>
    <image-container-wrapper>
      <image-container>
        <my-image></my-image>
        <my-image></my-image>
        <my-image></my-image>
        <my-image></my-image>
        <my-image></my-image>
        <my-image></my-image>
        <my-image></my-image>
        <my-image></my-image>
        <my-image></my-image>
        <my-image></my-image>
        <my-image></my-image>
        <my-image></my-image>
        <my-image></my-image>
        <my-image></my-image>
      </image-container>
    </image-container-wrapper>
  </content>
</main>
<footer></footer>

Answer 1

代替：

grid-template-columns: 300px auto

其中auto 表示内容长度，并将扩展一个元素以适应内容（即没有溢出）...

使用这个：

grid-template-columns: 300px minmax(0px, auto)

允许列缩小到 0 宽度。

sidebar {
  background-color: red;
  /* display: block; */
}

main {
  display: grid;
  /* grid-template-columns: 300px auto; */
  grid-template-columns: 300px minmax(0px, auto);
  width: 100vw;
}

content {
  background-color: blue;
  display: block;
}

image-container-wrapper {
  /*  display: block;
        overflow: scroll; */
}

image-container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}

my-image {
  display: block;
  flex: 0 0 auto;
  margin-right: 3px;
  min-width: 100px;
  min-height: 100px;
  background-color: grey;
}

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
}

<header>Header</header>
<main>
  <sidebar>This should be "fixed"</sidebar>
  <content>
    <h1>Slider below</h1>
    <image-container-wrapper>
      <image-container>
        <my-image></my-image>
        <my-image></my-image>
        <my-image></my-image>
        <my-image></my-image>
        <my-image></my-image>
        <my-image></my-image>
        <my-image></my-image>
        <my-image></my-image>
        <my-image></my-image>
        <my-image></my-image>
        <my-image></my-image>
        <my-image></my-image>
        <my-image></my-image>
        <my-image></my-image>
      </image-container>
    </image-container-wrapper>
  </content>
</main>
<footer></footer>