Проблема API Карт Google с границей CSS: справа;

Question

У меня очень простой контейнер flexbox с четырьмя элементами div (один с API Карт Google).

<div class="container">
    <div class="main-1"></div>
    <div class="main-2"></div>
    <div class="main-3"></div>
    <div id="map" class="main-map"></div>
</div>

Чтобы сделать простую границу, я попытался:

.container div:not(#map) {
    border-right: 10px solid #FFFFFF;
}

и

.container div:not(:last-child) {
    border-right: 10px solid #FFFFFF;
}

Границы появлялись, но те же самые границы появлялись в моя карта и я понятия не имею, как от них избавиться ... - image: ссылка на изображение

В качестве альтернативы, не было бы другого способа создать такие границы во flexbox? Что-то вроде:

flex-gap: 10px #FFFFFF;

или что-то в этом роде ...

Answer 1

Хотя я не уверен на 100% в этой проблеме, похоже, проблема в том, что ваша CSS нацелена на вещи, на которые она не должна.

Карты Google добавят несколько элементов div под #map element, и ваше правило CSS также соответствует этим правилам, поэтому они также получают границу.

Вам необходимо либо сбросить границу для дочерних элементов div #map, либо исключить их.

Если граничные элементы div являются прямыми дочерними элементами .container, используйте

.container > div:not(#map) {
    border-right: 10px solid #FFFFFF;
}

Если у вас более сложная структура и вы не можете напрямую исключить дочерние элементы #map, сбросьте их.

.container div {
    border-right: 10px solid #FFFFFF;
}
.container #map div {
    border-right: none;
}