Flexbox CSS строк не сжимается, чтобы поместиться внутри контейнера - PullRequest
Новая
       152

Flexbox CSS строк не сжимается, чтобы поместиться внутри контейнера

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

У меня есть контейнер flexbox с фиксированной высотой и шириной и несколько строк внутри, каждая из которых содержит объекты SVG.

Когда я добавляю больше SVG в одну строку, другие SVG в строке сжимаются, чтобы соответствовать ширина контейнера. Однако, если я добавлю больше строк, они не сжимаются, чтобы поместиться в контейнер, а вместо этого переполняются.

Как я могу предотвратить такое поведение и вместо этого заставить строки правильно сжиматься, чтобы поместиться внутри контейнера?

Пример кода (первая строка показывает сжатие по горизонтали; обратите внимание, что две нижние строки переполняют контейнер страницы div): 

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.row {
  flex: 1;
  flex-direction: row;
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.div-page {
  display: flex;
  flex-direction: column;
  height: 420mm;
  padding: 10mm;
  overflow: hidden;
}

object {
  max-width: 25%;
  max-height: 100%;
}
<body style="width: 594mm;">
  <div class="div-page">
    <div class="row">
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
    </div>
    <div class="row">
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
    </div>
    <div class="row">
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
    </div>
    <div class="row">
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
    </div>
    <div class="row">
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
    </div>
</body>

Ответы [ 2 ]

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

Исправлено заменой 

.row {
  ...
  width: 100%
}

на 

.row {
  ...
  max-width: 100%;
  min-width: 0;
  max-height: 100%;
  min-height: 0;
}
0 голосов
/ 09 мая 2020

Вы можете добавить flex: 1 к элементу объекта. Это означает, что он занимает одну часть от общей ширины. 

object {
  flex: 1;
}
...