Как получить прокручиваемый div в полный рост внутри flex-бокса? - PullRequest
Новая
       8

Как получить прокручиваемый div в полный рост внутри flex-бокса?

0 голосов
/ 25 июня 2018

Я хотел бы создать прокручиваемый div содержимого (#left), сохраняя все остальные элементы (#header, #right) на месте. Если я задаю #left фиксированную высоту, она ведет себя как угодно, но я хочу, чтобы она заполнила весь видовой экран и заранее не знала высоты. 

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

#main {
  display: flex;
  height: 100%;
  flex-direction: column;
}

#header {
  background-color: blue;
}

#content {
  flex: 1;
  background-color: red;
}

#inner {
  display: flex;
  height: 100%;
  background-color: yellow;
}

#left {
  flex: 1;
  height: 100%;
  overflow: auto;
  background-color: pink;
}

#right {
  flex: 1;
  height: 100%;
  background-color: green;
}
<div id="main">
  <div id="header">
    Heyheyhey<br/>
    Yo<br/>
  </div>
  <div id="content">
    <div id="inner">
      <div id="left">
Only this pane should scroll.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem. Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum magna dignissim ac.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem. Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum magna dignissim ac.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem. Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum magna dignissim ac.
      </div>
      <div id="right">
        Yo
      </div>
    </div>
  </div>

</div>

Спасибо!

Ответы [ 2 ]

0 голосов
/ 25 июня 2018

Просто используйте flex-свойства на всем протяжении.

Вам не нужно display: block.

Вам не нужно calc().

Вы надеваетедаже не нужны процентные высоты. 

#main {
  display: flex;
  flex-direction: column;
  height: 100vh;  
}
#header {
  background-color: aqua;
}
#content {
  flex: 1;
  background-color: red;
  display: flex;
  min-height: 0; /* for Firefox and Edge; see note below */
}
#inner {
  display: flex;
  background-color: yellow;
}
#left {
  flex: 1;
  overflow: auto;
  background-color: pink;
}
#right {
  flex: 1;
  background-color: lightgreen;
}
body {
  margin: 0;
}
<div id="main">
  <div id="header">
    Heyheyhey<br/> Yo
    <br/>
  </div>
  <div id="content">
    <div id="inner">
      <div id="left">
        Only this pane should scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem.
        Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus
        suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus
        lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum
        magna dignissim ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem.
        Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus
        suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus
        lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum
        magna dignissim ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem.
        Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus
        suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus
        lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum
        magna dignissim ac.
      </div>
      <div id="right">
        Yo
      </div>
    </div>
  </div>

</div>

Примечание. Чтобы этот макет соответствовал спецификации flexbox и работал в Firefox и Edge, необходимо переопределить стандартное значение min-height: auto для элементов flex.Chrome обеспечивает встроенную переопределение.Полное объяснение здесь: Почему гибкие элементы не уменьшаются до размера контента?

0 голосов
/ 25 июня 2018

Я считаю, что следующий подход решит вашу проблему Чистый CSS. display: flex в display: block. 

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

#main {
  display: flex;
  height: 100%;
  flex-direction: column;
}

#header {
  background-color: blue;
}

#content {
  display: flex;
  background-color: red;
  overflow: hidden;
}

#inner {
  display: block;
  background-color: yellow;
}

#inner2 {
  display: flex;
  height: 100%;
}

#left {
  width: 50%;
  background-color: pink;
  overflow: auto;
}

#right {
  width: 50%;
  background-color: green;
}
<div id="main">
  <div id="header">
    Heyheyhey<br/> Yo
    <br/>
  </div>
  <div id="content">
    <div id="inner">
      <div id="inner2">
        <div id="left">
          Only this pane should scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem.
          Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus
          suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique,
          tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan
          bibendum magna dignissim ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus
          lorem. Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum
          ac tellus suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique,
          tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan
          bibendum magna dignissim ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus
          lorem. Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum
          ac tellus suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique,
          tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan
          bibendum magna dignissim ac.
        </div>
        <div id="right">
          Yo
        </div>
      </div>
    </div>
  </div>
</div>
...