使子元素超出其父元素的宽度

Question

我想使子元素超出其父元素。因此，父元素可以进一步应用overflow-x: scroll。这里有一些关于我要实现的目标以及获得的目标的说明：

Illustration

我试图通过将display: inline-block应用于子元素来解决问题，或者尝试从类似的问题中找出答案。但这还没有解决我的问题。这是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>

每个孩子都有不同的宽度，如果加起来，它将超过父宽度。有什么解决方案或提示吗？

Answer 1

尝试

.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

我为您制作一个演示。

.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>