Добавление полосы прокрутки во flexbox с переполненным содержимым

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

В моем коде у column2 будет длинный контент, поэтому нам нужно иметь отдельные прокрутки для каждого столбца.

Это моя текущая структура:

html,
body {
  margin: 0;
  padding: 0;
  border: 0;
  height: 100%;
  min-height: 100%;
}

BODY.screen-layout-body {
  overflow: hidden;
}

.flex.two-col-main-sidebar {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding-right: 0;
}

.flex.layout-content-default {
  width: 100.0%;
  min-width: 0;
  max-width: none;
  display: flex;
  flex-flow: column wrap;
}

.layout-content-default {
  width: 100.0%;
  min-width: 0;
  max-width: none;
  display: block;
}

.content {
  white-space: normal;
}

.content-item {
  vertical-align: top;
  display: block;
  margin: 0.0px 0 14.0px 0px;
  width: 100.0%;
  padding: 0 0.0px 0 0.0px;
}

.two-col-main-sidebar>.column-1 {
  margin: 0;
  float: left;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  display: block;
  padding-right: 0.0px;
}

.flex.two-col-main-sidebar>.column-1 {
  margin: 0;
  padding-left: 0;
  position: static;
  float: none;
  padding-right: 0.0px;
  flex: 1 1 0%;
}

.two-col-main-sidebar>.column-2 {
  margin: 0 -100% 0 0;
  float: left;
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 300.0px;
}

.flex.two-col-main-sidebar>.column-2 {
  margin: 0;
  position: static;
  float: none;
  flex: 0 0 300.0px;
}

<html>

<body class = "screen-layout-body with-fixed-header">
  <div class = "header">Header</div>
  <div class = " flex content layout-content-default two-col-main-sidebar">
    <div class = "content-item content-layout column-1">Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content</div>
    <div class = "content-item content-layout column-2">Column2 which will be 30% of screen</div>
  </div>
</body>
<html>

Примечание: Какие бы классы CSS ни создавались здесь, мы не можем их изменять, кроме того, мы можем добавить больше классов в любой из div, чтобы он работал.

Ваш код делает совсем не то, что вы описали, изучите некоторые основы, прежде чем использовать flexbox.

— 18.09.2018 15:47

html css flexbox

18.09.2018 15:35

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

406

Ответы 1

Ваша версия ломается, потому что у вас column-1 установлен на width: 100%.

Вы также можете указать стили без всех вложенных селекторов (упрощает обслуживание кода).

html,
body {
  margin: 0;
  padding: 0;
  border: 0;
  height: 100%;
  min-height: 100%;
}

.screen-layout-body {
  overflow: hidden;
}

.flex {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding-right: 0;
}

.content {
  white-space: normal;
}

.content-item {
  vertical-align: top;
  display: block;
  margin: 0 0 14px 0;
  padding: 0;
}

.header {
  background-color: #444;
  color: #fff;
  width: 100%;
  padding: 1em;
  }
  
.column-1 {
  width: 70%;
  height: 95vh;
  overflow: auto;
  box-sizing: border-box;
  background-color: #eee;
  }
    
.column-2 {
  width: 30;
  height: 95vh;
  overflow: auto;
  background-color: #ccc;
  box-sizing: border-box;
  }

<html>

<body class = "screen-layout-body with-fixed-header">
  <div class = "header">Header</div>
  <div class = " flex content layout-content-default two-col-main-sidebar">
    <div class = "content-item content-layout column-1">Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content.</div>
    <div class = "content-item content-layout column-2">Column2 which will be 30% of screen</div>
  </div>
</body>
<html>

18.09.2018 15:57

Другие вопросы по теме

Применить стиль к определенной дочерней таблице, помещенной в другую таблицу

Как сделать так, чтобы нижний колонтитул оставался внизу как на компьютере, так и на мобильном устройстве

HTML / CSS наведите указатель мыши на один объект, чтобы другой изменил свой атрибут

Как исправить перекрытие панели навигации начальной загрузки?

Угловой мат материала - выбор ширины раскрывающегося списка

Сделайте таблицу адаптивной на мобильных устройствах с помощью HTML / CSS

Как выровнять текст перед изображениями

Текст метки начальной загрузки придерживается нижней строки поля ввода

CSS Scroll Wipes

Адаптивные элементы скрыты, когда нет места

Добавление полосы прокрутки во flexbox с переполненным содержимым

Ответы 1

Другие вопросы по теме

Похожие вопросы