Make child element go through beyond its parent width

Question

I want to make child element to go beyond it's parent element. So further the parent element can apply overflow-x: scroll. Here some illustration on what I want to achieved, and what I got:

Illustration

I have tried to solve the problem through applying display: inline-block to child element, or trying find out from similar question. but it hasn't solved my problem yet. Here is the html:

<div class="parent">
   <div class="child">Child Element</div>
   <div class="child">Child Element</div>
   <div class="child">Child Element</div>
   <div class="child">Child Element</div>
   <div class="child">Child Element</div>
</div>

Every child has a different width which if it added up will exceed parent width. Is there any solution or hint?

Does this answer your question? https://stackoverflow.com/questions/5581034/is-there-are-way-to-make-a-child-divs-width-wider-than-the-parent-div-using-css — Gosi, Nov 15 '18 at 01:16

score 0 · Answer 1 · answered Nov 15 '18 at 01:19

try this

.parent{
 max-width: 100%;
 overflow-x: scroll;
 white-space: nowrap;
}
.child{
 display: inline-block;
}

<div class="parent">
   <div class="child">Child Element</div>
   <div class="child">Child Element</div>
   <div class="child">Child Element</div>
   <div class="child">Child Element</div>
   <div class="child">Child Element</div>
</div>

score 0 · Accepted Answer · edited Nov 15 '18 at 01:29

I make a demo for you.

.child1, .child3, .child4{
  width: 100px;
  float: left;
  border: 1px solid red;
  text-align: center;
  padding: 10px;
}

.child2, .child5{
  width: 300px;
  float: left;
  border: 1px solid yellow;
  text-align: center;
  padding: 10px;
}

.parent{
  width: 1500px;
}

.scroll{
  max-width: 500px;
  width: 100%;
  overflow-x: auto;
  border: 1px solid #000;
  padding: 30px;
}

<div class="scroll">
  <div class="parent">
     <div class="child1">Child Element</div>
     <div class="child2">Child Element</div>
     <div class="child3">Child Element</div>
     <div class="child4">Child Element</div>
     <div class="child5">Child Element</div>
  </div>
</div>

*accept and upvote my answer* is not an answer or explanation, it's simple noise that shouldn't be included within an answser. You should simply answer the question and focus on details related to the answer — Temani Afif, Nov 15 '18 at 01:30

Make child element go through beyond its parent width

2 Answers2