0

Подскажите как сделать так, чтобы при использовании flexbox ширина блоков не менялась (уменьшалась) в зависимости от кол-ва блоков lane в board, а вместо этого появлялась бы горизонтальная прокрутка (см. пример кода ниже)

body {
    margin:     0;
    padding:    0;
    
    background: lightblue;
}

.board {
    display:                flex;
    align-items:            flex-start;
    flex-wrap:              nowrap;
        
    margin:                 0;
    padding:                0;
    
    background:             orange; 
}

.lane {
    display:                flex;
    flex-direction:         column;

    width:                  400px;

    margin:                 10px;
    padding:                0px;

    background:             white;
}

.task {
    display:                block;
    
    width:                  calc(100% - 2 * 5px);
    height:                 100px;
    
    margin:                 5px;
    
    background:             lightgreen;
}
    <div class = 'board'>
        <div class = 'lane'>
            <div class = 'task'>TASK</div>
        </div>
        <div class = 'lane'>
            <div class = 'task'>TASK</div>
            <div class = 'task'>TASK</div>
        </div>
        <div class = 'lane'>
            <div class = 'task'>TASK</div>
            <div class = 'task'>TASK</div>
            <div class = 'task'>TASK</div>
        </div>
        <div class = 'lane'>
            <div class = 'task'>TASK</div>
        </div>
        <div class = 'lane'>
            <div class = 'task'>TASK</div>
            <div class = 'task'>TASK</div>
        </div>
    </div>

4
  • 1
    задайте min-width либо lane либо task. 17 апр 2021 в 20:28
  • @Bear Vorkuta, действительно помогло, спасибо, но возникла вторая проблема - родительский контейнер при этом не увеличился по ширине и элементы вышли за его пределы - как этого избежать можно? Т.е. чтобы родитель увеличился и вместил в себя все дочерние элементы
    – Zhihar
    17 апр 2021 в 20:31
  • 1
    .board {width: min-content;} и 400px ширину уберите в .lane. У вас там видимо ширина все равно кальком задается. 17 апр 2021 в 20:56
  • @Bear Vorkuta, Ширину добавил чтобы гарантированно в примере за размер экрана вылезала
    – Zhihar
    17 апр 2021 в 21:03

1 ответ 1

2

body {
    margin:     0;
    padding:    0;
    background: lightblue;
}

.board {
    display: flex;
    align-items:flex-start;
    flex-wrap: nowrap;
    width: min-content;  
    margin: 0;
    padding: 0;        
    background: orange; 
}

.lane {
    display: flex;
    flex-direction: column;
    margin: 10px;
    padding: 0px;
    background: white;
}

.task {
    display: block;
    min-width: 150px;
    width: calc(100% - 2 * 5px);
    height: 100px;        
    margin: 5px;        
    background: lightgreen;
}
    <div class = 'board'>
        <div class = 'lane'>
            <div class = 'task'>TASK</div>
        </div>
        <div class = 'lane'>
            <div class = 'task'>TASK</div>
            <div class = 'task'>TASK</div>
        </div>
        <div class = 'lane'>
            <div class = 'task'>TASK</div>
            <div class = 'task'>TASK</div>
            <div class = 'task'>TASK</div>
        </div>
        <div class = 'lane'>
            <div class = 'task'>TASK</div>
        </div>
        <div class = 'lane'>
            <div class = 'task'>TASK</div>
            <div class = 'task'>TASK</div>
        </div>
         <div class = 'lane'>
            <div class = 'task'>TASK</div>
            <div class = 'task'>TASK</div>
        </div>
    </div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.