Добавление полосы прокрутки в flexbox с переполнением содержимого - PullRequest
Новая
       7

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

0 голосов
/ 18 сентября 2018

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

В моем коде 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, чтобы заставить его работать.

1 Ответ

0 голосов
/ 18 сентября 2018

Ваша версия ломается, потому что у вас 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...