CODEWITHSUNDEEP
htmlcss
Gary
Gary

Reputation: 2893

Setting width of an element to that of one which overflows its container when both are in a flexbox?

Is there a CSS way of getting the blue line (class .cover) in this snippet to have a width equal that of the .scrl_can, which exceeds the width of its container .prnt?

The width of .scrl_can changes based on user input. A width of 100% sets the width of .cover to the width of .prnt. I tried align-items: stretch; in .prnt and it is the same as width of 100%.

I realize there are other ways of getting the blue line in that position and of the desired width, but the real UI piece has some relatively positioned elements that "drop" below the container when selected; and setting overflow-x: hidden, cuts them off; so I was trying this method which almost works.

Thank you.

.flex_can {
  display: flex;
  flex-flow: row nowrap;
  width: 600px;
}
.space {
  flex: none;
  width: 150px;
  height: 50px;
  margin-left: 10px;
  background-color: rgb(200,200,200);
}
.prnt {
  flex: 1 1;
  border: 1px solid black;
  padding: 5px;
  display: flex;
  flex-flow: column nowrap;
  overflow-x: scroll;
}
.scrl_can {
  width: 500px;
  height: 50px;
  border: 0.1px solid green;
  white-space: nowrap;
}
.cover {
  flex: none;
  width: 100%;
  height: 2px;
  background-color: blue;
  margin-bottom: 20px;
}
<div class="flex_can">
  <div class="prnt">
   <div class="scrl_can">Some words here to span the width of prnt to make it a scroll can.</div>
   <div class="cover"></div>
  </div>
  <div class="space"></div>
</div>

Upvotes: 0

Views: 18

Answers (1)

MantisToboggan
MantisToboggan

Reputation: 73

I would use the ::after pseudo element.

.flex_can {
  display: flex;
  flex-flow: row nowrap;
  width: 600px;
}
.space {
  flex: none;
  width: 150px;
  height: 50px;
  margin-left: 10px;
  background-color: rgb(200,200,200);
}
.prnt {
  flex: 1 1;
  border: 1px solid black;
  padding: 5px;
  display: flex;
  flex-flow: column nowrap;
  overflow-x: scroll;
}
.scrl_can {
  position: relative;
  width: 500px;
  height: 50px;
  border: 0.1px solid green;
  white-space: nowrap;
}
.scrl_can::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: blue;
  margin-bottom: 20px;
}
<div class="flex_can">
  <div class="prnt">
   <div class="scrl_can">Some words here to span the width of prnt to make it a scroll can.</div>
   <!-- <div class="cover"></div> DON'T NEED THIS ANYMORE -->
  </div>
  <div class="space"></div>
</div>

Upvotes: 1

Related Questions