Flex сжимает элемент

Question

Мультиселекты "Прайм тайм" не хотят растягиваться (т.к. обернул их в контейнер). Все средства перепробовал, но ничего не помогает (кроме конкретного 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>

Answer 1

думаю он мешает все таки

.container_dropDown_filter_big {
  max-width: 300px;
}

Answer 2

В css добавил width: 100%; трём элементам и задал span-у "white-space: nowrap", чтобы текст был однострочный.
Прайм-тайм переместил вверх, а то не видно из-за ошибки скрипта это поле.

/*   */
.wrapper_time
{
  display: flex;
  flex-wrap: nowrap;
  align-items: center; 
  gap:20px;
  width: 100%;
  flex: 1;
}

.wrapper_time1 , .wrapper_time2
{
    display: flex;
    align-items: center;
  gap:15px;
}
.wrapper_time > div {
  width: 100%;
}
.wrapper_time > span {
  white-space: nowrap;
}
.mult-select-tag {
  width: 100%;
}

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="У нас легко найти новых друзей и подруг по интересам">
    <meta name="keywords"
          content="найти друзей, найти подругу, найти товарища, с кем поиграть, ищу друзей, ищу подругу, ищу игроков, ищу команду, поиск напарников">

    <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
        }

        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .01ms !important;
                scroll-behavior: auto !important
            }
        }

        * {
            padding: 0;
        }

        ::-webkit-scrollbar {
            width: 7px
        }

        ::-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(0, 255, 26)
        }

        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>


    <script src="https://nexo.games/js/Filters.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>
    <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>


<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>

БЛОГ НА HUSL

Flex сжимает элемент

Ответы (2 шт):