Question 44745 in Html Question posted in
Some basic documentation can be found here.

div not being scrollable – Html

I am trying to make the wrapper div scrollable when elements inside exceed the width of the wrapper. I applied overflow: auto but it is not making it scrollable. What am I missing and how can I fix it? Thanks in advance.

.wrapper {
  display: flex;
  flex-direction: row;
  justify-content: left;
  column-gap: 10px;
  width: 100%;
  height: 30vh;
  overflow: auto;
  background-color: gold;
}

.container {
  width: 100px;
  height: 100%;
  background-color: darkcyan;
}
<div class="wrapper">
  <div class="container">
  </div>
  <div class="container">
  </div>
  <div class="container">
  </div>
  <div class="container">
  </div>
  <div class="container">
  </div>
  <div class="container">
  </div>
  <div class="container">
  </div>
</div>
Tags:

2

Answers


  1. 0

    flex makes its children shrink and grow

    By default, a flex item (i.e. a child element inside a flex container) will grow or shrink flexibly. Thus, the naming "flexbox."

    In your snippet, even though you specified width: 100px; to .container elements, you haven’t specified its flex-grow or flex-shrink values.

    Try giving .container a specific flex value that stops them from growing/shrinking.

    .wrapper {
  display: flex;
  flex-direction: row;
  justify-content: left;
  column-gap: 10px;
  width: 100%;
  height: 30vh;
  overflow: auto;
  background-color: gold;
}

.container {
  height: 100%;
  flex: 0 0 100px;
  background-color: darkcyan;
}
    <div class="wrapper">
  <div class="container">
  </div>
  <div class="container">
  </div>
  <div class="container">
  </div>
  <div class="container">
  </div>
  <div class="container">
  </div>
  <div class="container">
  </div>
  <div class="container">
  </div>
</div>
    Login or Signup to reply.
  2. 0

    You need set flex-grow and flex-shrink to 0 for set shrink factor of container. Try replace width: 100px with flex: 0 0 100px.

    .container {
  flex: 0 0 100px;
  height: 100%;
  background-color: darkcyan;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search