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>

网格内的CSS水平滚动弹性框

1 个答案: