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

Html – Why is this overflow not detected?

The item-outer-container element has a smaller width than its child div, so why doesn’t a horizontal scrollbar appear?

https://jsfiddle.net/v32h5ko7/

#container {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translateY(-50%) translateX(50%);
  padding: 20px;
  border: solid 1px;
  border-radius: 100px;
  width: 90%;
  
  display: flex;
  align-items: center;

  &>* {
    width: calc(100%/3);
  }
}

span {
  height: 40px;
  border-radius: 20px;
}

#blu-button-container {
  flex-shrink: 1;

  span {
    display: block;
    width: 150px;
    background-color: blue;
  }
}

#title {
  min-width: 200px;
  text-align: center;
  font-weight: bold;
}

#item-outer-container {
  overflow: auto;
  height: 50px;
  flex-shrink: 1;
  display: flex;
  align-items: center;
  justify-content: end;

  div {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: end;
    gap: 5px;

    span {
      width: 40px;
      background-color: red;
    }
  }
}
<div id=container>
  <div id=blu-button-container>
    <span></span>
  </div>
  <div id=title>TITLE</div>
  <div id=item-outer-container>
    <div>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</div>
Tags:

3

Answers


  1. 0

    You need one more div wrapper inside #item-outer-container in order to dissociate container and child width.
    https://jsfiddle.net/rdj29amL/#&togetherjs=zlfuJRNyqE

    <div id=item-outer-container>
  <div width='100%'>
    <div>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    It looks like this bug: [flexbox] justify-content: flex-end breaks scroll

    This is caused by using justify-content: end; and overflow: scroll; or auto together. The items are pushed to the end of the container, causing the scrollbar to not appear.

    One easy solution is to just remove the justify-content: end;.

    #container {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translateY(-50%) translateX(50%);
  padding: 20px;
  border: solid 1px;
  border-radius: 100px;
  width: 90%;
  display: flex;
  align-items: center;
}

#container > * {
  width: calc(100% / 3);
}

span {
  height: 40px;
  border-radius: 20px;
}

#blu-button-container {
  flex-shrink: 1;
}

#blu-button-container > span {
  display: block;
  width: 150px;
  background-color: blue;
}

#title {
  min-width: 200px;
  text-align: center;
  font-weight: bold;
}

#item-outer-container {
  overflow-x: auto;
  overflow-y: hidden;
  height: 50px;
  display: flex;
  align-items: center;
  /*justify-content: end;  Removing the `justify-content: end;` will make the scrollbar appear.*/
}

#item-outer-container > div {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: end;
  gap: 5px;
}

#item-outer-container > div > span {
  width: 40px;
  background-color: red;
}
    <div id=container>
  <div id=blu-button-container>
    <span></span>
  </div>
  <div id=title>TITLE</div>
  <div id=item-outer-container>
    <div>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    The problem is justify-content: end;. Remove it and it’s functionality will be replaced with &>:first-child { margin-top: auto !important;}.

        #item-outer-container {
      overflow-x: auto;
      height: 50px;
      flex-shrink: 1;
      display: flex;
      align-items: center;

      & > :first-child {
          margin-top: auto !important;   
      }
      ...
     }

    This solution came up with some help from this answer: Use justify-content: flex-end and to have vertical scrollbar

    The discussion is pointing to an old bug

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search