css justify-content: center if the content is more than 100% of the parent's width

Question

https://codepen.io/anon/pen/aYPjZa#anon-signup here is an example here or below, it is necessary that the blocks are centered in the middle of the parent, if there are few of them then in the middle if a lot of scrolling appears

html, body { width: 100%; height: 100%; } body { background-color: #8e44ad; margin: 0; display: flex; align-items: center; } .card { background-color: #fff; min-width: 100%; min-height: 200px; display: flex; justify-content: center; } .card--content { background-color: #e74c3c; min-width: 200px; margin: 5px; }

 <section class="card"> <div class="card--content">1</div> <div class="card--content">2</div> <div class="card--content">3</div> <div class="card--content">4</div> <div class="card--content">5</div> <div class="card--content">6</div> <div class="card--content">7</div> <div class="card--content">8</div> <div class="card--content">9</div> <div class="card--content">10</div> <div class="card--content">11</div> <div class="card--content">12</div> <div class="card--content">13</div> <div class="card--content">14</div> <div class="card--content">15</div> <div class="card--content">16</div> <div class="card--content">17</div> <div class="card--content">18</div> <div class="card--content">19</div> <div class="card--content">20</div> <div class="card--content">21</div> <div class="card--content">22</div> </section>

Sasha Omelchenko Sasha Omelchenko 10.9k four 20 52 · Accepted Answer · 2018-04-10T08:16:30

You can do this with an extra wrapper, which will be centered with a margin: auto .

 html, body { width: 100%; height: 100%; } body { background-color: #8e44ad; margin: 0; } .card { background-color: #fff; min-width: 100%; display: flex; overflow: auto; margin: 2em 0; } .card__inner { margin: auto; display: flex; min-height: 200px; } .card__content { background-color: #e74c3c; min-width: 200px; margin: 5px; }

 <section class="card"> <div class="card__inner"> <div class="card__content">1</div> <div class="card__content">2</div> </div> </section> <section class="card"> <div class="card__inner"> <div class="card__content">1</div> <div class="card__content">2</div> <div class="card__content">3</div> </div> </section> <section class="card"> <div class="card__inner"> <div class="card__content">1</div> <div class="card__content">2</div> <div class="card__content">3</div> <div class="card__content">4</div> <div class="card__content">5</div> <div class="card__content">6</div> <div class="card__content">7</div> <div class="card__content">8</div> <div class="card__content">9</div> <div class="card__content">10</div> <div class="card__content">11</div> <div class="card__content">12</div> <div class="card__content">13</div> <div class="card__content">14</div> <div class="card__content">15</div> <div class="card__content">16</div> <div class="card__content">17</div> <div class="card__content">18</div> <div class="card__content">19</div> <div class="card__content">20</div> <div class="card__content">21</div> <div class="card__content">22</div> </div> </section>

l2banners l2banners 2,028 five nineteen · Answer 2 · 2018-04-09T13:56:33

 function HeightCheck(el) { //Функция сравнивает ширину окна браузера с суммой ширин всех элементов переданных в el var totalWidth = 0; for (i = 0; i < el.length; i++) { totalWidth += parseInt(getComputedStyle(el[i]).width); } if (parseInt(document.documentElement.clientWidth) < totalWidth) { return true; } } // Контейнер содержащий элементы var card = document.querySelector(".card"); // Элементы которые размещаются внутри контейнера var cardContent = document.querySelectorAll(".card--content"); if (HeightCheck(cardContent)) { // Если ширина браузера меньше чем ширина всех элементов контейнера // Присваиваем еще один класс card_start контейнеру card.classList.add("card_start"); }

 html, body { width: 100%; height: 100%; } body { background-color: #8e44ad; margin: 0; display: flex; align-items: center; } .card { background-color: #fff; min-width: 100%; min-height: 70px; display: flex; justify-content: center; overflow-x: auto; max-width: 100%; } .card_start { justify-content: flex-start; } .card--content { background-color: #e74c3c; min-width: 70px; margin: 5px; }

 <body> <section class="card"> <div class="card--content">1</div> <div class="card--content">2</div> <div class="card--content">3</div> <div class="card--content">4</div> <div class="card--content">5</div> <div class="card--content">6</div> <div class="card--content">7</div> <div class="card--content">8</div> <div class="card--content">9</div> <div class="card--content">10</div> <div class="card--content">11</div> <div class="card--content">12</div> <div class="card--content">13</div> <div class="card--content">14</div> <div class="card--content">15</div> <div class="card--content">16</div> <div class="card--content">17</div> <div class="card--content">18</div> <div class="card--content">19</div> <div class="card--content">20</div> <div class="card--content">21</div> <div class="card--content">22</div> </section> </body>

@baneling then it was necessary to clarify the question that you need a solution without using js.
Although I do not think that with flexes to turn out differently.

css justify-content: center if the content is more than 100% of the parent's width

2 answers 2

More articles: