Мультиселекты "Прайм тайм" не хотят растягиваться (т.к. обернул их в контейнер). Все средства перепробовал, но ничего не помогает (кроме конкретного width:**px). Как их растянуть ?
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*,*:before,*:after{box-sizing:border-box}ul[class],ol[class]{padding:0}body,h1,h2,h3,h4,p,ul[class],ol[class],li,figure,figcaption,blockquote,dl,dd{margin:0}body{min-height:100vh;scroll-behavior:smooth;text-rendering:optimizeSpeed;line-height:1.5}ul[class],ol[class]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img{max-width:100%;display:block}article>*+*{margin-top:1em}input,button,textarea,select{font:inherit}
*{padding:0;}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgb(68,86,157);border-radius:0}::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgb(102 155 229)}html{display:flex;justify-content:center;scroll-behavior:smooth}body{width:100%;display:flex;flex-direction:column;margin:0 auto;background:#051228;max-width:1440px;color:white;font-family:"Gilroy";font-style:normal}main{flex:1 0 auto}.header{margin:0 auto;width:100%;max-width:1440px;height:60px;display:flex;align-items:center;text-decoration:none}header>a:hover,a:visited,a:link,a:active{text-decoration:none;color:#FFFFFF}li{list-style-type:none}nav{font-weight:500;font-size:16px;line-height:19px;color:#FFFFFF}svg{width:36px;height:36px}.logo{width:125px;height:100%;display:flex;align-items:center}.logo>svg{width:55px;height:55px}.logoName{display:flex;align-items:center;width:55px;font-style:normal;font-weight:700;font-size:18px;line-height:22px;margin-left:5%}.nav{margin-left:5%;width:100%;display:flex;align-items:center;justify-content:space-between}.side-nav-btn{display:none}
</style>
<link rel="preload" href="https://nexo.games/css/main.css" as="style" onload="this.onload=null;this.rel=`stylesheet`">
<noscript><link rel="stylesheet" href="https://nexo.games/css/main.css"></noscript>
<link type="text/css" href="https://nexo.games/css/media.css" rel="stylesheet">
<script src="https://nexo.games/service-worker.js"></script>
<script src="https://nexo.games/js/Script.js"></script>
<script src="https://nexo.games/js/GuiTranslation.js"></script>
<script src="https://nexo.games/js/Request.js"></script>
<script src="https://nexo.games/js/OnLoad.js"></script>
<script src="https://nexo.games/js/Ux.js"></script>
<script src="https://nexo.games/js/LanguageMenu.js"></script>
<script src="https://nexo.games/js/API.js"></script>
<script src="https://nexo.games/js/Register.js"></script>
<script src="https://nexo.games/js/Filters.js"></script>
<script src="https://nexo.games/js/GameCreateRequestMenu.js"></script>
<script src="https://nexo.games/js/FilterAnim.js"></script>
<script src="https://nexo.games/js/GameCreateRequestMenu.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () =>
{
offsetPage = 0;
activeFilterCallReason = FilterCallReason.NONE;
filterState = FilterState.READY;
selectedFilters = [];
let requestsContainer = document.getElementsByClassName("mate_requests_container")[0];
window.addEventListener("scroll", function() {
if (IsScrolledIntoView(requestsContainer, true))
{
FilterMates(FilterCallReason.ADD);
}
});
});
</script>
<title>MATE</title>
</head>
<body>
<div id="filter_mate" class="filter_mate">
<div class="container_dropDown_filter_big">
<label for="filter_mate_game">game</label>
<select name="countries" id="filter_mate_game" onchange="FilterMates(FilterCallReason.RELOAD)" multiple>
<option value="1">Afghanistan</option>
<option value="2">Australia</option>
<option value="3">Germany</option>
<option value="4">Canada</option>
<option value="5">Russia</option>
<option value="6">Afghanistan</option>
<option value="7">Australia</option>
<option value="8">Germany</option>
<option value="9">Canada</option>
<option value="10">Russia</option>
</select>
</div>
<div class="container_dropDown_filter_big">
<label for="filter_mate_genders">Genders</label>
<select name="countries" id="filter_mate_genders" onchange="FilterMates(FilterCallReason.RELOAD)" multiple>
<option value="1">Afghanistan</option>
<option value="2">Australia</option>
<option value="3">Germany</option>
<option value="4">Canada</option>
<option value="5">Russia</option>
<option value="6">Afghanistan</option>
<option value="7">Australia</option>
<option value="8">Germany</option>
<option value="9">Canada</option>
<option value="10">Russia</option>
</select>
</div>
<div class="container_dropDown_filter_small">
<label for="filter_mate_platform">Платформа</label>
<select name="countries" id="filter_mate_platform" onchange="FilterMates(FilterCallReason.RELOAD)" multiple>
<option value="1">PC</option>
<option value="2">PS</option>
<option value="3">Xbox</option>
</select>
</div>
<div class="container_dropDown_filter_big">
<label for="filter_mate_country">country</label>
<select name="countries" id="filter_mate_country" onchange="FilterMates(FilterCallReason.RELOAD)" multiple>
<option value="1">1</option>
<option value="2">Australia</option>
<option value="3">Germany</option>
<option value="4">Canada</option>
<option value="5">Russia</option>
</select>
</div>
<div class="container_dropDown_filter_big">
<label for="filter_mate_language">languages</label>
<select name="countries" id="filter_mate_language" onchange="FilterMates(FilterCallReason.RELOAD)" multiple>
<option value="1">1</option>
<option value="2">Australia</option>
<option value="3">Germany</option>
<option value="4">Canada</option>
<option value="5">Russia</option>
</select>
</div>
<style>
.wrapper_time
{
display: flex;
flex-wrap: wrap;
align-items: center;
gap:20px;
width: 100%;
flex:1;
min-width: 200px;
}
.wrapper_time1 , .wrapper_time2
{
display: flex;
align-items: center;
gap:15px;
width: 100%
}
.wrapper_time > div {
width: 100%;
max-width:250px;
min-width: 100px;
display: flex;
}
.wrapper_time > span {
}
.mult-select-tag {
width: 100%;
}
</style>
<div class="wrapper_time">
<span>Прайм-тайм</span>
<div>
<div class="wrapper_time1">
<span>С</span>
<select name="countries" id="filter_mate_time1" onchange="FilterMates(FilterCallReason.RELOAD)"
multiple>
<option value="0">Неважно</option>
<option value="1">00:00</option>
<option value="2">01:00</option>
<option value="3">02:00</option>
<option value="4">03:00</option>
<option value="5">04:00</option>
<option value="6">05:00</option>
<option value="7">06:00</option>
<option value="8">07:00</option>
<option value="9">08:00</option>
<option value="10">09:00</option>
<option value="11">10:00</option>
<option value="12">11:00</option>
<option value="13">12:00</option>
<option value="14">13:00</option>
<option value="15">14:00</option>
<option value="16">15:00</option>
<option value="17">16:00</option>
<option value="18">17:00</option>
<option value="19">18:00</option>
<option value="20">19:00</option>
<option value="21">20:00</option>
<option value="22">21:00</option>
<option value="23">22:00</option>
<option value="24">23:00</option>
</select>
</div>
</div>
<div>
<div class="wrapper_time2">
<span>До</span>
<select name="countries" id="filter_mate_time2" onchange="FilterMates(FilterCallReason.RELOAD)"
multiple>
<option value="0">Неважно</option>
<option value="1">00:00</option>
<option value="2">01:00</option>
<option value="3">02:00</option>
<option value="4">03:00</option>
<option value="5">04:00</option>
<option value="6">05:00</option>
<option value="7">06:00</option>
<option value="8">07:00</option>
<option value="9">08:00</option>
<option value="10">09:00</option>
<option value="11">10:00</option>
<option value="12">11:00</option>
<option value="13">12:00</option>
<option value="14">13:00</option>
<option value="15">14:00</option>
<option value="16">15:00</option>
<option value="17">16:00</option>
<option value="18">17:00</option>
<option value="19">18:00</option>
<option value="20">19:00</option>
<option value="21">20:00</option>
<option value="22">21:00</option>
<option value="23">22:00</option>
<option value="24">23:00</option>
</select>
</div>
</div>
</div>
<div class="checkbox">
<input class="custom-checkbox" type="checkbox" id="checkbox_online" name="checkbox_online" value="Online">
<label for="checkbox_online">Online</label>
</div>
<div class="filter_mate_button">
<span id="buttonCleanDropdownsSelect" class="cursor_pointer" onclick="clear_filters_value()">Очистить все</span>
<span class="underline cursor_pointer" onclick="roll_up()">Свернуть</span>
</div>
</div>
<script>
new MultiSelectTag("filter_mate_game", {resetButtonId: "buttonCleanDropdownsSelect"}); // id
new MultiSelectTag("filter_mate_genders", {resetButtonId: "buttonCleanDropdownsSelect"}); // id
new MultiSelectTag("filter_mate_platform", {showSearchInput: false, resetButtonId: "buttonCleanDropdownsSelect", canMulti: false}); // id
new MultiSelectTag("filter_mate_country", {resetButtonId: "buttonCleanDropdownsSelect"}); // id
new MultiSelectTag("filter_mate_language", {resetButtonId: "buttonCleanDropdownsSelect"}); // id
new MultiSelectTag("filter_mate_time1", {showSearchInput: false,resetButtonId: "buttonCleanDropdownsSelect", canMulti: false}); // id
new MultiSelectTag("filter_mate_time2", {showSearchInput: false,resetButtonId: "buttonCleanDropdownsSelect", canMulti: false}); // id
</script>
</body></html>