CSS горизонтальная прокрутка флекс-бокса в сетке

Question

Отказ от ответственности: я прочитал тонну почти моего варианта использования, но не нашел точно такой же, поэтому:

Я хочу иметь сетку с левой боковой панелью фиксированной ширины, а правый столбец контента должен просто заполнитьостальная часть окна , но не более .

У меня оно работает в «чистой» компоновке гибкого блока, но по какой-то странной причине не в сетке.

Чтослучается, что гибкий элемент просто сделает всю сетку шире, чем окно, и прокрутит всю эту вещь.

Я хочу, чтобы только гибкий контейнер прокручивал и заголовок выше оставался там, где он есть.

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