Почему пункты меню вылезают за блок при использованиии flex-direction column?

Question

[vladimiraurelius]

Помогите пожалуйста разобраться почему пункты меню не растягивают само меню, при использовании flex-direction:column. Есть ссылка на codepen popup также код прилагается
Вот HTML

<div class="popup-wrapper">
			<div class="popup">
				<ul class="popup-menu">					
					<li class="popup-link">Bentwood furniture</li>
					<li class="popup-link">Bobbin furniture</li>
					<li class="popup-link">Campaign furniture</li>
					<li class="popup-link">Cane furniture</li>
					<li class="popup-link">Chippendale</li>
					<li class="popup-link">Corner furniture</li>
					<li class="popup-link">Cottage furniture</li>
					<li class="popup-link">Country furniture</li>
					<li class="popup-link">Shaker furniture</li>					
					<li class="popup-link">Lowboy</li>
					<li class="popup-link">Parsons table</li>
					<li class="popup-link">Basket table</li>
					<li class="popup-link">Gateleg table</li>
					<li class="popup-link">Contact us</li>
					<li class="popup-link">Dressing table</li>
					<li class="popup-link">Drum table</li>					
					<li class="popup-link">Armoire</li>
					<li class="popup-link">Bureau</li>
					<li class="popup-link">Chest of drawers</li>
					<li class="popup-link">Coffer</li>					
					<li class="popup-link">Settle</li>
					<li class="popup-link">Stool</li>
					<li class="popup-link">Wainscot chair</li>
					<li class="popup-link">Taboret</li>
					<li class="popup-link">Windsor chair</li>
					<li class="popup-link">Faldstool</li>
					<li class="popup-link">Confidante</li>
					<li class="popup-link">Basket chair</li>
					<li class="popup-link">Cathedra</li>
					<li class="popup-link">Love seat</li>
				</ul>
			</div>
		</div>

Вот CSS

.popup-wrapper {
  position: relative;
}

.popup {
  position: absolute;
  top: 0;
  left: 20px;
  -webkit-box-shadow: 1px 1px 3px #7c7b7b;
  box-shadow: 1px 1px 3px #7c7b7b;
}
.popup-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: 1em;
  height: 400px;
  font-size: 16px;
  background-color: rgb(212, 236, 161);
}
.popup-link {
  display: block;
  margin-right: 10px;
  font-size: 1.1em;
  line-height: 2em;
}

Comments

[Ankhena]

1. Зачем тут тег CSS GRID, если вопрос заведомо не про него?
2. Это известный баг флексов, гуглите.

[vladimiraurelius]

Спасибо, вопрос исправил. Уже второй день гуглю, подскажите куда копать.

Answer 1

[sharpsss]

Popup menu: width задаешь размер 80% или какой тебе нужен размер ну и всё в принципе - должно заработать

Comments

[vladimiraurelius]

Спасибо. Я так и сделал. Просто хотел решение более универсальное. Поскольку изначально не знаю количество элементов списка(они приходят из бекенда). Может быть один столбик а может и три а размер родителя 80% всегда

[sharpsss]

vladimiraurelius, я что то на подобии делал на гриде то что с бэка приходит json обрабатывал и подставлял js-ом нужный стиль *тут у меня если 4 штучки то красиво в 4 встанет если меньше то красиво растянется по ширине*

let users = [
    {
        name: 'Soltan',
        img: '4_user.webp',
        country: 'Almaty',
        color: '#41932C',
        url:'vk.com',
        action: 'могу созвониться',
        action_svg: 'phone.svg',
         time: ['18:00', '19:00', '20:00'],
         key:'1'
    },
    {
        name: 'Also',
        img: '5_user.webp',
         country: 'UKG',
         color: '#2C3693',
         url:'vk.com',
          action: 'могу созвониться',
        action_svg: 'phone.svg',
        time: ['18:00', '19:00', '20:00'],
        key:'0'
    },
    {
        name: 'Maria',
        img: '6_user.webp',
        country: 'UKG',
        color: '#000000',
        url:'vk.com',
         action: 'могу созвониться',
        action_svg: 'phone.svg',
        time: ['18:00', '19:00', '20:00'],
        key:'0'
    },
    {
        name: 'Nargiza',
        img: '7_user.webp',
        country: 'Almaty',
        color: '#e13daf',
        url:'vk.com',
         action: 'могу созвониться',
        action_svg: 'phone.svg',
        time: ['18:00', '19:00', '20:00'],
        key:'0'
    }
]

users.length >= 4 ?  document.querySelector('div.container_users').classList.add("more_users") : document.querySelector('div.container_users').classList.add("fewer_users");
let html = ``;
let images ='';

users.forEach((el)=> {
  el.time.forEach(function(item){
images += '<div><img src="assets/images/'+el.action_svg+'" alt="'+el.action+'"><span>'+item+'</span></div>';
          })
    html += `
    <div class="container_users_user">
         <div class="user_country mr">${el.country}</div>
           <div class="user_cart" style ="--color: ${el.color};">
            <picture><source srcset="assets/images/${el.img}" type="image/webp">  <img src="img/image.png" alt="Пользователь ${el.name}"></picture>
            <div class="${el.key == '1' ? "user_creator" : "user"} mr"><a href="${el.url}">${el.name}</a></div>
             <div class="user_times mr">
        <div class="times_scroll">${images}</div>
      </div>
    </div>
    </div>
    `
    images ='';
})

document.querySelector('.container_users').innerHTML = html
document.addEventListener('DOMContentLoaded', function(){
const script = document.createElement('script');
script.src = 'assets/js/scrolling_time.js';
document.head.appendChild(script);
})

.more_users{
  grid-template-columns: 1fr 1fr 1fr 1fr;
  overflow-y: scroll;
}
.fewer_users{
  grid-auto-flow: column;
}

[vladimiraurelius]

Спасибо. На гридах можно попробовать.

Answer 2

[Gannnku]

.popup-menu указана фиксированная ширина height: 400px

Comments

[vladimiraurelius]

Да я указывал специально, что бы получилось три ряда.

[Gannnku]

vladimiraurelius, какой смысл делать ссылкой элемент списка?

[vladimiraurelius]

Извиняюсь не досмотрел. Переделывал из другого примера href осталось.

[Gannnku]

Ну как-то так
https://codepen.io/skrike/pen/poOWqWx

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="popup-wrapper">
        <div class="popup">
            <a href="#">Bentwood furniture</a>
            <a href="#">Bobbin furniture</a>
            <a href="#">Campaign furniture</a>
            <a href="#">Cane furniture</a>
            <a href="#">Chippendale</a>
            <a href="#">Corner furniture</a>
            <a href="#">Cottage furniture</a>
            <a href="#">Country furniture</a>
            <a href="#">Shaker furniture</a>
            <a href="#">Lowboy</a>
            <a href="#">Parsons table</a>
            <a href="#">Basket table</a>
            <a href="#">Gateleg table</a>
            <a href="#">Contact us</a>
            <a href="#">Dressing table</a>
            <a href="#">Drum table</a>
            <a href="#">Armoire</a>
            <a href="#">Bureau</a>
            <a href="#">Chest of drawers</a>
            <a href="#">Coffer</a>
            <a href="#">Settle</a>
            <a href="#">Stool</a>
            <a href="#">Wainscot chair</a>
            <a href="#">Taboret</a>
            <a href="#">Windsor chair</a>
            <a href="#">Faldstool</a>
            <a href="#">Confidante</a>
            <a href="#">Basket chair</a>
            <a href="#">Cathedra</a>
            <a href="#">Love seat</a>
        </div>
    </div>
</body>

</html>

CSS

body {
    width: 100%;
    height: 100%;
    background: url('https://www.viettonkinconsulting.com/wp-content/uploads/2022/06/pexels-pixabay-414837.jpg');
    background-size: cover;
    padding: 0;
    margin: 0;
}

.popup-wrapper {
    padding: 0;
    margin: 0;
    position: absolute;
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.popup {
    align-self: center;
    padding: 0;
    margin: 0;
    background-color: white;
    flex: 1;    
    flex-wrap: wrap;
    display: flex;
    max-height: 400px;
    max-width: 400px;
}

.popup a {
    text-decoration: none;
    color: #168fe0;
    display: block;  
    padding: 0.5rem;
    margin: 0;
    transition: 0.3s;
}

.popup a:hover {
  background: rgb(230, 230, 230);
}

[Gannnku]

vladimiraurelius, если смотреть именно в три колонки, то уже логика по другому строиться должна

[Gannnku]

vladimiraurelius,

Исправленный вариант на 3 колонки

.popup {
    align-self: center;
    padding: 0;
    margin: 0;
    background-color: white;
    flex: 1;    
    flex-wrap: wrap;
    display: flex;
    max-height: 400px;
    max-width: 600px;
}

.popup a {
    text-decoration: none;
    color: #168fe0;
    display: block;
    padding: 0.5rem;
    margin: 0;
    transition: 0.3s;
    width: 30%;
}

[vladimiraurelius]

Спасибо. Интересный вариант. Но елементы списка должны строится в столбик. И когда займут всю высоту переходить на следующий, тем самым растягивать родителя. Поскольку изначально я не знаю сколько их будет. Может они займут 2 или 4 столбика. Они подтягиваются с с бекенда.