CODEWITHSUNDEEP
javascripthtmlcss
caramba
caramba

Reputation: 22480

Make element stay to the right even when scrolling horizontally

There is a "red colored" element which should always stay to the right. With to the right I mean to the right of the parent lime colored border element. "Normally" setting the parent to position: relative; and the child to position: absolute; right: 0; does the trick but not in this case.

Anyone telling me why and how to fix it?

.grid {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    margin: 0;
}

.grid div[class*='col-'] {
    position: relative;
    padding: 15px;
    flex-grow: 0.33;
    flex-shrink: 1;
    flex-basis: 0%;
    border: solid 1px lime;
}

.resize-bar {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background-color: red;
    opacity: 0.8;
}

[data-resizable] {
    min-width: 5px;
    overflow-x: scroll;
}
<h2>Hover on "orange" and scroll horizontally</h2>
<div class="grid">
  <div class="col-1-4" data-resizable="true">
      <div style="width:300px;height:40px;background-color:orange;"></div>
      <span class="resize-bar"></span>
  </div>
</div>

If possible a non javascript solution will be preferred. Thank you.

JsFiddle here

Upvotes: 0

Views: 522

Answers (1)

Ivan
Ivan

Reputation: 895

fiddle

wrap content in another div, which same size of col-

.grid {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    margin: 0;
}

.grid div[class*='col-'] {
    position: relative;
    flex-grow: 0.33;
    flex-shrink: 1;
    flex-basis: 0%;
    overflow-x: hidden;
    border: solid 1px lime;
}

.resize-bar {
    position: absolute;
    display: block;
    right: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background-color: red;
    opacity: 0.8;
}

.box {
  width: 100%;
  height: 100%;
    min-width: 5px;
    overflow-x: scroll;
}
<h2>Hover on "orange" and scroll horizontally</h2>
<div class="grid">
  <div class="col-1-4" data-resizable="true">
    <div class="box">
      <div style="width:370px;height:40px;background-color:orange;">

      </div>
    </div>
    <span class="resize-bar"></span>
  </div>
      
 
</div>

Upvotes: 2

Related Questions