I'm trying to create a part of a website, with 3 parts (let's call them A, B, C), where A and B are beside each other (aligned to touch opposite sides of a container), and below them is C, but when A, and B don't fit beside each other in the container, B wraps below C instead of between A and C.
A, B and C all have expanding-collapsing components, and the container can be resized by other elements, so all their sizes are unknown. This means that using @media is out of the question.
Expected result:
When A and B fit beside each other:
When they don't:
Is this possible to achieve with flexbox or grid?
This is as far as I got:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>flexbox black magic</title>
</head>
<body>
<div style="width:50%; border:4px solid blue; margin:8px; display: flex; justify-content: space-between; flex-wrap: wrap;">
<div style="width: 100px; height: 60px; border: 4px solid red; margin:8px;">a</div>
<div style="width: 70px; height: 30px; border: 4px solid green; margin:8px;">b</div>
<div style="width: 100%">
<div style="width: 100%; max-width: 240px; height: 100px; border: 4px solid orange; margin:8px;">c</div>
</div>
</div>
</body>
</html>
question from:
https://stackoverflow.com/questions/65907161/allow-flex-wrapping-under-other-content 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…