Можно ли переносить на новую строку только части элемента flexbox (не весь элемент flexbox)?
Например, когда элемент flexbox сам содержит элементы flexbox: Codepen
.flex {
display: flex;
justify-content: left;
flex-direction: row;
flex-wrap: wrap;
/* flex-wrap: wrap-reverse; */
/* flex-wrap: nowrap; */
}
.block {
display: block;
height: 66px;
width: 100px;
}
.top {
background: blue;
width: 100%;
height: 100%;
padding: 8px;
}
.left {
background: gray;
width: 500px;
}
.right {
background: green;
/* flex-wrap: no-wrap; */
/* flex-wrap: wrap; */
/* flex-wrap: wrap-reverse; */
height: 50px;
padding: 8px;
}
.should-stay-in-first-line {
display: block;
width: 250px;
background: yellow;
height: 50px;
}
.may-wrap-to-second-line {
display: block;
width: 250px;
background: red;
height: 50px;
}
<div class="top flex">
<div class="left block"><label>left</label></div>
<div class="right flex">
<label>right</label>
<div class="should-stay-in-first-line block"><label>should-stay</label></div>
<div class="may-wrap-to-second-line block"><label>may-wrap</label></div>
</div>
</div>
Когда окно браузера достаточно большое, веб-сайт выглядит следующим образом:
+---------------------------------+
| left right should stay may wrap |
+---------------------------------+
Когда на внешнем flexbox установлен flex-wrap: wrap;
и ширина браузера уменьшается, это выглядит так:
+---------------------------------+
| left |
| right should stay may wrap |
+---------------------------------+
Когда на внутреннем flexbox установлена flex-wrap: wrap;
, а ширина браузера уменьшается, это выглядит так:
+---------------------------------+
| left right should stay |
| may wrap |
+---------------------------------+
Что я хочу (при уменьшении ширины браузера):
+---------------------------------+
| left right should stay |
| may wrap |
+---------------------------------+
Есть ли возможность достичь этого с помощью HTML flexboxes?