We try to construct a css layout, that's a three part single row element, which has the following properties:

1. it consists of three elements
2. the outer elements will always have the same width
3. the center element will take up the rest of the space.
4. 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 >
  <div  style="background: #555; color: #FFF;">
    L
  </div>
  <div  style="background: #CCC;">
    This is okay (item 1 and 2 both are same size, if your screen is big enough)
  </div>
  <div  style="background: #555; color: #FFF;">
  RRR
  </div>
</div>

<div >
  <div  style="background: #555; color: #FFF;">
    L
  </div>
  <div  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  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?

CodePudding user response：

I'm using flex-basis, to set the widths of the items on the sides to the same value, and then setting the center item to a flex-basis of 100% to take up the remaining space. This way I'm setting the outer elements to have a percentage value rather than a fixed value.

.container {
  display: flex;
  background-color: grey;
  min-height: 10vh;
  gap: 0.5rem;
  color: white;
  padding: 0.5rem;
}

.item {
  background-color: black;
  padding: 1em;
}

.item-2 {
  flex-basis: 100%;
}

.item-1,
.item-3 {
  flex-basis: 20%;
}

<section >
  <div >L</div>
  <div >
    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. sdkfsg slfmsfg
  </div>
  <div >RRR</div>
</section>

CodePudding user response：

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 >
  <div  style="background: #555; color: #FFF; min-width: 200px;">
    L
  </div>
  <div  style="background: #CCC;">
    This is okay (item 1 and item 2 both are same size, if your screen is big enough)
  </div>
  <div  style="background: #555; color: #FFF; min-width: 200px">
  RRR
  </div>
</div>

<div >
  <div  style="background: #555; color: #FFF; min-width: 200px;">
    L
  </div>
  <div  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  style="background: #555; color: #FFF; min-width: 200px;">
  RRR
  </div>
</div>

As you are saying, the outer elements will always have the same width.