CODEWITHSUNDEEP
cssflexbox
Simon H
Simon H

Reputation: 21037

scrolling panel within flexbox layout

I'm trying to create a layout with some potentially rather wide content, but with only one part of the page (the green area) scrolling. I have three columns and the last one is broken into two vertically with the bottom needing to be able to scroll (the contents of this will generally be a table of around 700px wide). see https://codepen.io/simonh1000/pen/RVgOMo and the code below

As you will see, the top part of the third column is not wrapping text when I want it to, while the bottom part is not showing scroll bars to accommodate a deliberately wide contents. This is what I need help with

three columns

body {
  margin: 0;
  padding: 0;
}
.container {
  height: 100vh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  font-size: 28px;
  padding: 0;
}
  .first, .second {
    padding: 15px;
    flex: 0 0 150px;    
  }
  .third {
    flex: 1 1;
    display: flex;
    flex-direction: column;
  }

.first {
  background-color: #ee6;
}
.second {
  background-color: #c66;
}
.top {
  flex: 0 0 150px;
  background-color: #27c;
  
}
.main {
  flex: 1 1;
  width: 700px;
  background-color: #4c9;
  overflow: auto;
  padding: 15px;
}
<div class="container">
  <div class="first">Fixed</div>
  <div class="second">Fixed</div>
  <div class="third">
    <div class="top">Text here should wrap but does not</div>
    <div class="main">
      This section should scroll so that it can accommodate content that is rather wider than the space left on the screen.
    </div>
  </div>
</div>

Upvotes: 2

Views: 716

Answers (2)

Asons
Asons

Reputation: 87303

You need to solve that using a wrapper for the scrolling content, and have it positioned absolute.

Remove the width: 700px from main and add a wrapper, here done with mainwrapper

For this demo I added an inner content which is set to 700px wide/high so you see how it behaves

body {
  margin: 0;
  padding: 0;
}
.container {
  height: 100vh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  font-size: 28px;
  padding: 0;
}
.container .first, .container .second {
  padding: 15px;
  flex: 0 0 35%;
}
.container .third {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

.first {
  background-color: #ee8;
}
.second {
  background-color: #e7e;
}
.third {
  background-color: #bc1;
}

.top {
  flex: 0 0 150px;
  background-color: #2cc;
}
.main {
  position: relative;
  flex: 1 1;
}
.main .mainwrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #4c9;
  overflow: auto;
  padding: 15px;
  box-sizing: border-box;
}
<div class="container">
  <div class="first">Fixed</div>
  <div class="second">Fixed</div>
  <div class="third">
    <div class="top">Text here should wrap</div>
    <div class="main">
      <div class="mainwrapper">
        <div style="width: 700px; height: 700px">
          Simulating big content (700px wide, 700px high)
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Danield
Danield

Reputation: 125641

You have set a fixed width for the element with class main.

.main {
  ...
  width: 700px; /* this is the problem */
}

Remove it and everything will work as expected.

Updated Codepen

Upvotes: 2

Related Questions