使子元素超出其父元素的宽度[重复]

Question

This question already has an answer here:

• Prevent divs from wrapping when parent is too small 2 answers

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?

Answer 1

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> 

Answer 2

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>