CODEWITHSUNDEEP
scrollflexboxoverflow
Travis Martin
Travis Martin

Reputation: 43

flex scroll with no scroll bar

I am trying to get my main area container (with overflow: auto) to scroll, but with no extra scroll bar. Currently there is an extra scroll bar for the container. I would like to use to main scroll bar to scroll up and down. Im sure ill have to do a slightly different layout to get this to work. I would prefer a flexbox solution, however am open to any method.

https://codepen.io/marti2221/pen/oyxZzx

<section id="container" >
<header id="header" >
  <div class="header-top">
    <button class="order-btn">Order</button>
    <div class="icon-1">
      <div class="">icon 1</div>
      <div class="">icon 2</div>
    </div>
  </div>
  <div class="header-bottom">

</header>
<article id="content" >
  <div class="main-bg">
    <div class="menu-box">
      <div class="menu-item">
        <div class="top-info-wrapper">
          <h3>Name</h3>
          <h3>$6.50</h3>
        </div>
        <div class="descr-wrapper">
          <p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
        </div>
      </div>
      <div class="menu-item">
        <div class="top-info-wrapper">
          <h3>Name</h3>
          <h3>$6.50</h3>
        </div>
        <div class="descr-wrapper">
          <p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
        </div>
      </div>
      <div class="menu-item">
        <div class="top-info-wrapper">
          <h3>Name</h3>
          <h3>$6.50</h3>
        </div>
        <div class="descr-wrapper">
          <p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
        </div>
      </div>
      <div class="menu-item">
        <div class="top-info-wrapper">
          <h3>Name</h3>
          <h3>$6.50</h3>
        </div>
        <div class="descr-wrapper">
          <p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
        </div>
      </div>
      <div class="menu-item">
        <div class="top-info-wrapper">
          <h3>Name</h3>
          <h3>$6.50</h3>
        </div>
        <div class="descr-wrapper">
          <p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
        </div>
      </div>
      <div class="menu-item">
        <div class="top-info-wrapper">
          <h3>Name</h3>
          <h3>$6.50</h3>
        </div>
        <div class="descr-wrapper">
          <p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
        </div>
      </div>
     </div>
  </div>
</article>

</section>

html, body {
height: 100%; 
width: 100%;
}
#container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
background-color: lightblue;
}

#container header {
background-color: gray;
height: 200px;
display: flex; 
flex-direction: column; 
}

.header-top {
display: flex; 
justify-content: space-between; 
}

.order-btn {
align-self: flex-start;
}

#container article {
flex: 1 1 auto;
overflow-y: auto;
min-height: 0px;
}


.main-bg {
display: flex; 
justify-content: center;
}

.menu-box {
width: 35%; 
border: 1px solid black; 
display: flex;
flex-direction: column; 
}
.top-info-wrapper {
display: flex; 
justify-content: space-between;
}

.icon-1 {
display: flex; 
}

.header-bottom {
display: flex; 
width: 35%; 
}

Upvotes: 0

Views: 147

Answers (1)

Nandita Sharma
Nandita Sharma

Reputation: 13417

Removed flex from container div as it was not required. Also moved background-color: lightblue; to article instead of container div. Also added margin: 0; on body tag.

 
html, body {
height: 100%; 
width: 100%;
margin: 0;
}
#container {
height: 100%;
width: 100%;
}

#container header {
background-color: gray;
  height: 100px;
  position: fixed;
top: 0;
width: 100%;
}

.header-top {
  display: flex; 
  justify-content: space-between; 
}

.order-btn {
  align-self: flex-start;
}

#container article {
background-color: lightblue;
overflow-y: auto;
min-height: 0px;
margin-top: 100px;
}


.main-bg {
  display: flex; 
  justify-content: center;
}

.menu-box {
  width: 35%; 
  border: 1px solid black; 
  display: flex;
  flex-direction: column; 
}
.top-info-wrapper {
  display: flex; 
  justify-content: space-between;
}

.icon-1 {
  display: flex; 
}

.header-bottom {
  display: flex; 
  width: 35%; 

}
<section id="container" >
<header id="header" >
  <div class="header-top">
    <button class="order-btn">Order</button>
    <div class="icon-1">
      <div class="">icon 1</div>
      <div class="">icon 2</div>
    </div>
  </div>
  <div class="header-bottom">
    
</header>
<article id="content" >
  <div class="main-bg">
    <div class="menu-box">
      <div class="menu-item">
        <div class="top-info-wrapper">
          <h3>Name</h3>
          <h3>$6.50</h3>
        </div>
        <div class="descr-wrapper">
          <p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
        </div>
      </div>
      <div class="menu-item">
        <div class="top-info-wrapper">
          <h3>Name</h3>
          <h3>$6.50</h3>
        </div>
        <div class="descr-wrapper">
          <p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
        </div>
      </div>
      <div class="menu-item">
        <div class="top-info-wrapper">
          <h3>Name</h3>
          <h3>$6.50</h3>
        </div>
        <div class="descr-wrapper">
          <p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
        </div>
      </div>
      <div class="menu-item">
        <div class="top-info-wrapper">
          <h3>Name</h3>
          <h3>$6.50</h3>
        </div>
        <div class="descr-wrapper">
          <p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
        </div>
      </div>
      <div class="menu-item">
        <div class="top-info-wrapper">
          <h3>Name</h3>
          <h3>$6.50</h3>
        </div>
        <div class="descr-wrapper">
          <p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
        </div>
      </div>
      <div class="menu-item">
        <div class="top-info-wrapper">
          <h3>Name</h3>
          <h3>$6.50</h3>
        </div>
        <div class="descr-wrapper">
          <p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
        </div>
      </div>
     </div>
  </div>
</article>

</section>

Upvotes: 1

Related Questions