Лучший способ разместить детей без границ?

Question

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

Как лучше всего избежать этой границы.

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

Дочерние элементы встроены и естественным образом переполняются, поэтому в отличие от столбца или строки, вы не можете удалить ведущий / конечный с помощью селекторов first/last-child

---

Пример

<div id="parent">
    <div></div> 
    <div></div>
    <div></div>
   <!-- More children... -->
</div>

Дочерние элементы должны находиться на расстоянии друг от друга, но не от родительского элемента.Третий ребенок естественно переполняется.

#parent {
    width: 300px;
    display: flex;
    flex-wrap: wrap
}
#parent > * {
    display: inline-block;
    width: 110px;
    height 110px;
    flex-grow: 1
} 

Я пишу это на своем телефоне, поэтому трудно форматировать код.

Answer 1

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

Обратите внимание, что элемент обертки является необязательным в этом решении.

.wrapper {
    border: 1px solid #FF0000;
    max-width: 300px;
    overflow: hidden;
    width: 100%;
}

.container {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
}

.col {
    background: #FFCCCC;
    height: 110px;
    margin: 10px;
    max-width: 110px;
    padding: 5px;
    width: 100%;
}

<div class="wrapper">
    <div class="container">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
        <!-- More items... -->
    </div>
</div>