-1

I need to build a one page website, with 3 divs like this:

.container{
  display: table;
  width: 100%;
  height: 100%;
 }
.container > div {
  vertical-align:top;
 }
 .left, .center, .right {
   display: table-cell;
   height:auto;
 }
 .left, .right{
   width:200px;
 }
   <div class="container">
      <div class="left">
      <div class="middle">
      <div class="right">
   </div>

The 3 divs have auto height, the left and right one have a fixed width. The middle one contains dynamic data, and I wanted it to have a scroll bar when needed.

The problem is since i'm auto height on the 3 divs, when I add data to the middle one, the other divs change size. I'm trying to find a solution without using Javascript.

Achraf Hassani
  • 1
  • 2

2 Answers2

0

Flexbox can do that

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

html,
body {
  height: 100%;
}

body {
  height: 100vh;
}

.left,
.right {
  flex: 0 0 200px;
  background: pink;
  padding: 1em;
  max-height: 100vh;
  overflow: auto;
}

.container {
  display: flex;
  height: 100vh;
  background: red;
  align-items: flex-start;
}

.middle {
  flex: 1;
  max-height: 100vh;
  background: lightblue;
  overflow: auto;
}
<div class="container">
  <div class="left">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
  <div class="middle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt exercitationem totam, odit modi dolorem quis dicta molestias alias praesentium harum consequuntur sint animi consequatur, sunt fuga id illum deleniti fugiat? Nesciunt quis fuga recusandae,
    eveniet libero dicta aliquid explicabo qui molestiae, quae architecto at excepturi accusantium earum neque assumenda distinctio commodi possimus harum voluptatum sint natus minima numquam! Dolorem voluptas amet, fuga omnis nobis sint numquam harum,
    nam unde optio velit eligendi iste veniam voluptatibus suscipit dignissimos voluptatem adipisci sequi ullam voluptates? Earum, alias inventore. A, ratione itaque reiciendis possimus tenetur libero assumenda? Commodi optio quas adipisci tempora modi
    sequi voluptatem provident quos laudantium accusamus! Cupiditate incidunt soluta est, repellendus eius quo, earum quia tenetur ipsa minus aspernatur, ex ad! Eius repellendus itaque nostrum minus perferendis exercitationem non doloremque necessitatibus
    sequi autem omnis consequuntur quo, laborum ratione, repudiandae aliquid nisi amet harum culpa vel magni cumque voluptates deserunt fugit. Quo, iste veritatis. Dolore placeat fuga alias obcaecati. Totam quidem itaque ipsa culpa sint aperiam praesentium
    dignissimos fuga earum doloribus autem eveniet, impedit molestiae illum neque rerum non suscipit eligendi doloremque, nam veniam! Sequi dolorum officia esse, temporibus itaque fugit eius voluptate consequatur laboriosam dolores qui ducimus ipsam accusantium
    laudantium laborum.</div>
  <div class="right">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum, deserunt magnam ipsum porro dicta accusantium</div>
</div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
0

See if this is what you want?

.container{
  display: table;
  width: 100%;
  height: 100%;
 }
 body{
 margin: 0;
 }
.container > div {
  vertical-align:top;
 }
 .left, .middle, .right {
   display: table-cell;
   height: 100vh;
   box-sizing: border-box;
   
 }
 .left, .right{
   width:20%;
   background: gray;
 }
 
 .middle{
   overflow: auto;
   position: relative;
 }
 
 .in-middle{
   background: tomato;
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
 }
 .in-in-middle{
   height: 1000px;
   background: tomato;
 }
<div class="container">
  <div class="left"></div>
  <div class="middle">
    <div class="in-middle">
      <div class="in-in-middle"></div>
    </div>
  </div>
  <div class="right"></div>
</div>
BeeBee8
  • 2,944
  • 1
  • 27
  • 39