CSS - overflow-y: прокручивать; не включить прокрутку и получить >100% высоты блока

#html #css #sass

#HTML #css #sass

Вопрос:

Мне нужно сделать прокручиваемый блок по оси y внутри left-navbar . И высота этого блока должна заполнять все свободное пространство left-navbar . Таким образом, эта left-navbar высота составляет 100% страницы и не более.

Но history-overflow не прокручивается, и отображаются все history-item элементы, поэтому они сделали всю left-navbar высоту больше высоты страницы.

Кроме того, когда высота страницы уменьшается, history-overflow следует заполнять только свободное пространство, чтобы сделать left-navbar высоту не более 100%. Как это сделать?

Пример песочницы Codepen:https://codepen.io/car1ot/pen/zYqLqKB

HTML-код:

 <div className="left-navbar">
    <div className="history">
        <label>History</label>
        <div className="history-overflow">
            <div className="history-item">*...some content here...*</div>
            *...more history-item(s) here...*
        </div>
    </div>
</div>

CSS (scss) код:

 div.left-navbar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 290px;
    height: 100%;
    padding: 25px 20px;
    box-sizing: border-box;

    div.history {
        display: flex;
        flex-direction: column;

        div.history-overflow {
            margin-top: 8px;
            margin-right: -20px;
            padding-right: 14px;
            overflow-y: scroll;

            div.history-item {
                display: flex;
                align-items: center;
                flex-shrink: 0;
                padding: 0 16px 0 6px;
                height: 40px;
                width: 100%;
                border-radius: 7px;
                margin-bottom: 8px;
                box-sizing: border-box;
            }
        }
    }
}

1. Просто предположение, но попробуйте добавить overflow: hidden к .history и .left-navbar . Трудно сказать, если вы можете предоставить jsfiddle / codepen для воспроизведения проблемы, было бы проще.

2. Это не помогло бы…

3. codepen.io/car1ot/pen/zYqLqKB

Ответ №1:

Если вы установите overflow: hidden значение .history и max-height: 100vh на .left-navbar , я думаю, это делает то, что вы хотите. Не уверен в контексте вашего полного макета (возможно, вы не хотите использовать 100vh, но там другое значение). Важной частью является то, что вы должны где-то ограничить высоту.

1. Это не работает. Пожалуйста, ознакомьтесь с codepen, я добавил: codepen.io/car1ot/pen/zYqLqKB

2. Я попытался добавить эти 2 свойства в раздел кода, которым вы поделились, и это приводит к тому, что навигационная панель .left не увеличивается более чем на 100 вч, и содержимое можно прокручивать, я не уверен, какую проблему вы видите.

Ответ №2:

Если я правильно вас понял, это ваше решение:

 body { padding:0; margin:0; }

div.left-navbar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 290px;
    height: 100vh;  /* This */
    padding: 25px 20px;
    box-sizing: border-box;
    background: rgba(#000, 0.1);

    div.history {
        display: flex;
        flex-direction: column;
        height:100%;  /* This */
        div.history-overflow {
            margin-top: 8px;
            margin-right: -20px;
            padding-right: 14px;
            background: rgba(blue, 0.1);
            overflow-y:scroll;
            div.history-item {
                display: flex;
                align-items: center;
                padding: 0 16px 0 6px;
                height: 100px;
                width: 100%;
                border-radius: 7px;
                margin-bottom: 8px;
                box-sizing: border-box;
                background: rgba(#000, 0.075);
            }
        }
    }
  }