I am creating blocks here to serve as containers.
Within these three container concepts, there is some super unattractive content.
- The background colors and borders in this setup are deliberately ugly to illustrate the layout structure.
- The body has been set to a standard default of 16px font size with no margins or padding for most browsers.
- The parent-container has been given a grid layout with left and right columns; The left column has a specified min/max size, while the right column adjusts based on its contents.
- A grid gap has been added to the parent container to visually separate the left and right sections.
- The elements in the left side have been aligned to display how much control can be exerted within the container.
- The right side is configured to align to the top of the block and include a scroll bar per the original poster's query.
- Various elements with unappealing backgrounds have been placed on the right side to demonstrate both control within the container and containment due to the scroll setting.
- The excessive CSS styling present serves the sole purpose of illustrating the structure, resulting in an overly exaggerated appearance.
body {
font-size: 16px;
margin: 0;
padding: 0;
}
.parent-container {
display: grid;
grid-template-columns: minmax(6.25rem, 25%) 1fr;
grid-gap: 0.25em;
}
.left-side {
align-self: start;
background-color: #FF000011;
height: 100%;
text-align: center;
border-right: 2px solid #FF000088;
display: grid;
}
.right-side {
background-color: #90EE90;
align-self: start;
scrollbar-color: rebeccapurple green;
overflow-x: auto;
}
.right-side>.right-header {
grid-row: 1 / 1;
background-color: #FFFF00;
text-align: center;
}
.right-side>.right-content {
background-color: #FF80FF;
display: grid;
}
.right-side .right-text {
background-color: #FFFF00;
}
.next-child-right {
justify-self: safe center;
align-self: baseline;
border: outset 1px #00FF00AA;
border-radius: 1em;
padding: 0.5em;
background-color: #00FF00;
margin-bottom: 1em;
}
.block-thing {
justify-self: end;
align-self: end;
height: 3rem;
width: 8ch;
border: double #00FF00;
}
.blocky-child-right {
width: 50rem;
height: 3rem;
border: solid blue 1px;
text-align: end;
}
.block-header {
text-transform: uppercase;
font-size: 1.5rem;
font-weight: 600;
font-family: sans-serif;
}
<div class="parent-container">
<div class="left-side">
<div class="block-header">left side</div>
<div>Next left</div>
<div class="block-thing">block thing</div>
</div>
<div class="right-side">
<div class="right-header block-header">
right side
</div>
<div class="right-content">
<p class="right-text">
Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph
Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph
Paragraph Paragraph Paragraph Paragraph
</p>
<div class="next-child-right">I am the next content</div>
<div class="blocky-child-right">blocky I am</div>
</div>
</div>
</div>