У меня есть коробка-обертка, которая не может быть переполнена.
Внутренняя коробка, содержащая дочерние элементы.
Эти дочерние элементы должны быть выровнены по горизонтали и не могут быть разбиты на вторая строка.
Если у меня слишком много детей, чем у меня, то sh горизонтальное переполнение внутреннего блока, но не внешнего блока.
Я не могу заставить детей не разрыв строки, так что полоса прокрутки оказывается бесполезной.
Дети будут выровнены по горизонтали с плавающей точкой: слева, какие разрывы строк и изгиб, что подгоняет детей.
Я нашел три страницы с аналогичная проблема здесь при переполнении стека и пробовал их, но никто не работал Не уверен, если это делает это запрещенным как дубликат или нет.
Я подозреваю, что вращение элементов странным образом отбрасывает вещи.
CodePen: https://codepen.io/Tygari/pen/mdJQZVw
CSS
class{
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;
}
HTML
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/tygari/echo-js/echo.js" sync></script>
<class>
<info></info>
<archetype class="archetype" echo="foo bar baz foobar foobaz barfoo barbaz" code="<div class='diamond'
><div><div><div></div></div></div></div>">
</archetype>
</class>
DOM
<class>
<info></info>
<archetype class="archetype" echo="foo bar baz foobar foobaz barfoo barbaz" code="<div class='diamond'
onclick='this.parentNode.parentNode.className += this.id'><div><div><div></div></div></div></div>">
<div id="foo" class='diamond'><div><div><div></div></div></div></div>
<div id="bar" class='diamond'><div><div><div></div></div></div></div>
<div id="baz" class='diamond'><div><div><div></div></div></div></div>
<div id="foobar" class='diamond'><div><div><div></div></div></div></div>
<div id="foobaz" class='diamond'><div><div><div></div></div></div></div>
<div id="barfoo" class='diamond'><div><div><div></div></div></div></div>
<div id="barbaz" class='diamond'><div><div><div></div></div></div></div>
</archetype>
</class>
Решено добавлением «display: flex;» для архетипа элемента и "flex-shrink: 0;" в класс диаманта.