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

Html – How to make scrollable flex column with sticky buttons on the right?

I would like to have a horizontally scrollable column flex container with sticky buttons on the right. But when the items exceed their containers by different amounts, then one of the button gets detached from the right border after scrolling fully to the right.

It it possible to make this right – i.e. let the first button detach from the paragraph and stay on the right as it would if the container didn’t overflow?

(No javascript, pure css)
(Note the items could also have different margins or paddings on the left since I want to make this with a Tree structure)

* {
  font-size: 30px;
}

.container {
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  /* Enables horizontal scrolling when content overflows */
}

.item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  position: relative;
  border: 3px solid plum;
}

.item p {
  flex: 1;
  margin: 0;
  white-space: nowrap;
  /* Prevents text from wrapping */
}

.item button {
  position: sticky;
  right: 0;
  margin-left: 10px;
  white-space: nowrap;
}
<!DOCTYPE html>
<html lang="en">

<body>
  <div class="container">
    <div class="item">
      <p>First item text is a bit longer and continues without wrapping.</p>
      <button>First Button</button>
    </div>
    <div class="item">
      <p>Second item text is also extended to demonstrate horizontal scrolling.</p>
      <button>Second Button</button>
    </div>
  </div>
</body>

</html>
Tags:

2

Answers


  1. 0

    Use a grid instead of flexbox on the container

    * {
  font-size: 30px;
}

.container {
  display: grid;
  overflow-x: auto;
  /* Enables horizontal scrolling when content overflows */
}

.item {
  display: flex;
  align-items: start;
  margin-bottom: 20px;
  position: relative;
  border: 3px solid plum;
}

.item p {
  flex: 1;
  margin: 0;
  white-space: nowrap;
  /* Prevents text from wrapping */
}

.item button {
  position: sticky;
  right: 0;
  margin-left: 10px;
  white-space: nowrap;
}
    <div class="container">
  <div class="item">
    <p>First item text is a bit longer and continues without wrapping.</p>
    <button>First Button</button>
  </div>
  <div class="item">
    <p>Second item text is also extended to demonstrate horizontal scrolling.</p>
    <button>Second Button</button>
  </div>
</div>
    Login or Signup to reply.
  2. 0 
    * {
  font-size: 30px;
}

.container {
  display: grid;
  overflow-x: auto;
  /* Enables horizontal scrolling when content overflows */
}

.item {
  display: flex;
  align-items: start;
  margin-bottom: 20px;
  position: relative;
  border: 3px solid plum;
}

.item p {
  flex: 1;
  margin: 0;
  white-space: nowrap;
  /* Prevents text from wrapping */
}

.item button {
  position: sticky;
  right: 0;
  margin-left: 10px;
  white-space: nowrap;
}
<div class="container">
  <div class="item">
    <p>First item text is a bit longer and continues without wrapping.</p>
    <button>First Button</button>
  </div>
  <div class="item">
    <p>Second item text is also extended to demonstrate horizontal scrolling.</p>
    <button>Second Button</button>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search