CSS Контейнер сетки сжимается внутри контейнера Flex (воспроизведение сборника рассказов) - PullRequest
Новая
       137

CSS Контейнер сетки сжимается внутри контейнера Flex (воспроизведение сборника рассказов)

0 голосов
/ 04 мая 2020

Кто-нибудь знает, почему этот код делает то, что делает? У меня есть контейнер сетки с 4 элементами внутри, который должен отображать их горизонтально с зазором 15 пикселей между ними. Не уверен, почему, но Storybook имеет центрирующий код, который использует гибкий контейнер для вертикального центрирования содержимого, но при этом он сжимает мой контейнер сетки до ширины 8 пикселей. Удаление display: flex решает проблему, но разбивает центрирующее отображение. Что CSS мне нужно добавить к этому компоненту, чтобы обеспечить его достаточную ширину для отображения чисел по горизонтали без жесткого кодирования значения ширины? 

<div id="sb-addon-centered-wrapper">
  <div id="sb-addon-centered-inner">
    <div id="grid">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </div>
</div>

#sb-addon-centered-wrapper {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  display: flex;
  align-items: center;
  overflow: auto;
}
#sb-addon-centered-inner {
  margin: auto;
  max-height: 100%;
}

#grid { 
 display: grid;
  grid-gap: 15px;
grid-template-columns: repeat(auto-fit, minmax(0, max-content));
}

https://codepen.io/eriklharper/pen/oNjpgVj?editors=1100

1 Ответ

0 голосов
/ 04 мая 2020

Элементы сетки сжаты (и обернуты), потому что flex-grow: 1 на дочернем элементе .sb-addon-centered-inner ничего не делает. 

<div id="sb-addon-centered-wrapper">
  <div id="sb-addon-centered-inner">
    <div style="flex-grow: 1;"> <------ THIS
      <div id="grid">
           …

.sb-addon-centered-inner не имеет display: flex или * Применяется 1008 *, поэтому дети не распознают свойства flex.

Добавьте взамен flex-grow: 1 к .sb-addon-centered-inner, который является элементом flex.

Затем отцентрируйте содержимое с помощью justify-content: center на сетке контейнера. 

#sb-addon-centered-inner {
  flex-grow: 1;
}

#grid { 
  justify-content: center;
}


#sb-addon-centered-wrapper {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  display: flex;
  align-items: center;
  overflow: auto;
}

#sb-addon-centered-inner {
  margin: auto;
  max-height: 100%;
  flex-grow: 1; /* new */
}

#grid {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(auto-fit, minmax(0, max-content));
  /* min-width: 18px; */
  justify-content: center; /* new */
}

#grid div {
  min-width: 40px;
}
<div id="sb-addon-centered-wrapper">
  <div id="sb-addon-centered-inner">
    <div style="flex-grow: 1;">
      <div id="grid">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
      </div>
    </div>
  </div>
</div>
...