CODEWITHSUNDEEP
htmlcss
leuction
leuction

Reputation: 585

How to split the view in 2 columns with css

I tried to build a split view with css, I have built a demo to illustrate my idea.

https://codepen.io/anon/pen/VRgbpN

I want to have the column 1 and column 2, both of them will have an independent scoll bar so that I can scroll them sperately. I try with the css grid and I found I cannot set the height of column 1 and column 2 to be the same height as the container. If I can do that, I maybe could use overflow: scroll to make that happened. But I try with tons of solutions and I found out I cannot set the height: 100% work. What I have done wrong? Is there any better solution to solve that? Thank you.

Upvotes: 0

Views: 43

Answers (1)

hotpink
hotpink

Reputation: 3226

Add flex: 1 if you want navi and content to also fill the entire width of your container.

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
}
.container {
  width: 100%;
  height: 100%;
  border: 3px dotted red;
  display: flex;
}

.navi, .content {
  overflow-y: scroll;
  /* flex: 1 */
}

.navi {
  border: 3px dotted blue;
}

.content {
  border: 3px dotted yellow;
}
<div class="container">
  <div class="navi">
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
  </div>
  <div class="content">
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    
  </div>
</div>

Upvotes: 1

Related Questions