我有一個不能溢出的包裝盒。一個裝有孩子的內盒。這些子項需要水平對齊，并且不允許中斷到第二行。如果孩子太多，我希望內盒水平溢出，但外盒不水平溢出。我無法讓孩子們不換行，因此滾動條最終變得毫無用處。子項將與 float: left 水平對齊，該行會斷開并彎曲，從而擠壓子項以適應。我在堆棧溢出上發現了三個具有類似問題的頁面并嘗試了它們，但沒有一個起作用。不確定這是否會導致此內容被視為重復項而被禁止。我懷疑是元素的旋轉導致了奇怪的事情發生。代碼筆： https: //codepen.io/Tygari/pen/mdJQZVwCSSclass{    display: block;    height: 210px;    width: 70vw;    margin-left: auto;    margin-right: auto;    border: 1px solid black;    overflow: hidden;}info{    display: block;    height: 10%;    width: 70vw;    margin-left: auto;    margin-right: auto;    border: 1px solid black;}archetype{    display: inline-block;    height: 90%;    width: 100%;    overflow: scroll;    overflow-y: hidden;}.foo > archetype,.bar > archetype,.baz > archetype,.foobar > archetype,.foobaz > archetype,.barfoo > archetype,.barbaz > archetype{    display: none;}#foo div div div::before{    content: 'Foo';}#bar div div div::before{    content: 'Bar';}#baz div div div::before{    content: 'Baz';}#foobar div div div::before{    content: 'Foobar';}#foobaz div div div::before{    content: 'Foobaz';}#barfoo div div div::before{    content: 'Barfoo';}#barbaz div div div::before{    content: 'Barbaz';}.diamond{    height: 125px;    width: 125px;    margin-left: 60px;    text-align: center;    border: 1px solid black;    transform: translate(-30px,30px) rotate(45deg);}.diamond div{    position: relative;    border: 1px solid black;    left: 50%;    top: 50%;    transform: translate(-50%,-50%);    height: 100px;    width: 100px;}.diamond div div{    border: 1px solid black;    left: 50%;    top: 50%;    transform: translate(-50%,-50%);    height: 75px;    width: 75px;}.diamond div div div{    left: 50%;    top: 50%;    transform: translate(-50%,-50%) rotate(-45deg);    height: auto;    width: auto;    border:none;}通過添加“display: flex;”解決 原型元素和“flex-shrink: 0;” 到.鉆石級。