CSS "Triptichon" Element layout - css

Question

We try to construct a css layout, that's a three part single row element, which has the following properties:
it consists of three elements
the outer elements will always have the same width
the center element will take up the rest of the space.
It may grow on block-axis
We approached this in different ways (especially float, flexbox and grid), but to no avail.
As soon as the center element will be bigger than the available place, it will at first displace the outer elements and then overflow or grow in the block-axis, here's a sample using grid and a single auto column:
.grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
margin-bottom: 1em;
}
<div class="grid">
<div class="item-1" style="background: #555; color: #FFF;">
L
</div>
<div class="item-2" style="background: #CCC;">
This is okay (item 1 and 2 both are same size, if your screen is big enough)
</div>
<div class="item-3" style="background: #555; color: #FFF;">
RRR
</div>
</div>
<div class="grid">
<div class="item-1" style="background: #555; color: #FFF;">
L
</div>
<div class="item-2" style="background: #CCC;">
This wont<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="item-3" style="background: #555; color: #FFF;">
RRR
</div>
</div>
So my question: is there a solution, that does not include setting a fixed width for the outer elements?

Answer 1

Can you try this, may be adding min-width to the outer elements fit the requirement.
.grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
margin-bottom: 1em;
}
<div class="grid">
<div class="item-1" style="background: #555; color: #FFF; min-width: 200px; max-width: 200px;">
L
</div>
<div class="item-2" style="background: #CCC;">
This is okay (item 1 and item 2 both are same size, if your screen is big enough)
</div>
<div class="item-3" style="background: #555; color: #FFF; min-width: 200px; max-width: 200px;">
RRR
</div>
</div>
<div class="grid">
<div class="item-1" style="background: #555; color: #FFF; min-width: 200px;">
L
</div>
<div class="item-2" style="background: #CCC;">
This wont<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="item-3" style="background: #555; color: #FFF; min-width: 200px;">
RRR
</div>
</div>
As you are saying, the outer elements will always have the same width.