Within CSS, is there a way to apply a style such that the maximum child flex column width is used for all siblings?

user_10118421 0
Viewed 42

Is there a way to apply a CSS style (at parent and/or child level) to indicate that the child elements are to share the same flex column width? If not, I presume Javascript can accomplish it.

For example, on the below form, I want the three div controls in the first column to have the same width (so that the second columns line up vertically), but I don't want to set a width absolutely or relative to their parent -- rather, I want the maximum of the flex widths to be used.

Example form

Associated html (for fields only):

<div class="form">
    <div class="item-row">
        <div class="item-row-label">
            Last Name
        </div>
        <div class="item-row-value">
            <input />
        </div>
    </div>
    <div class="item-row">
        <div class="item-row-label">
            First Name
        </div>
        <div class="item-row-value">
            <input />
        </div>
    </div>
    <div class="item-row">
        <div class="item-row-label">
            State
        </div>
        <div class="item-row-value">
            <input />
        </div>
    </div>
   </div>

Associated CSS (for fields only):

.item-row {
  display: flex;
  padding: 2.5px;
  align-items: center;
}

.item-row .item-row-label {
  margin-right: 10px;
}

.item-row .item-row-value {
  flex: 1;
}

.item-row .item-row-value input {
  border-radius: 5px;
  border: 0;
  background-color: lightgray;
  margin: 0;
  width: 100%;
  padding: 3px 10px;
  outline: none;
}
css html
1 Answers

Is there a way to apply a CSS style (at parent and/or child level) to indicate that the child elements are to share the same flex column width?

For parent level, yes, but you'll have to use grid instead of flexbox. You can set the property grid-template-columns to set the size and number of columns. See the snippet below:

.item-row {
  display: grid;
  grid-template-columns: .2fr 1fr;
  padding: 2.5px;
  align-items: center;
}

.item-row .item-row-label {
  margin-right: 10px;
}

.item-row .item-row-value input {
  border-radius: 5px;
  border: 0;
  background-color: lightgray;
  margin: 0;
  width: 100%;
  padding: 3px 10px;
  outline: none;
}
<div class="form">
  <div class="item-row">
    <div class="item-row-label">
      Last Name
    </div>
    <div class="item-row-value">
      <input />
    </div>
  </div>
  <div class="item-row">
    <div class="item-row-label">
      First Name
    </div>
    <div class="item-row-value">
      <input />
    </div>
  </div>
  <div class="item-row">
    <div class="item-row-label">
      State
    </div>
    <div class="item-row-value">
      <input />
    </div>
  </div>
</div>

More on grid here.

But if that seem to not fit this requirement:

but I don't want to set a width absolutely or relative to their parent -- rather, I want the maximum of the flex widths to be used.

Then you might want to restructure your html like so:

.form {
  display: grid;
  grid-template-columns: max-content 1fr;
  padding: 2.5px;
}

.item-row {
  display: grid;
  gap: .5rem;
}

.item-row .item-row-label {
  margin-right: 10px;
}

.item-row-value {
  border-radius: 5px;
  border: 0;
  background-color: lightgray;
  margin: 0;
  width: 100%;
  padding: 3px 10px;
  outline: none;
}
<div class="form">
  <div class="item-row">
    <label for="lastName" class="item-row-label">
      Last Name
    </label>
    <label for="firstName" class="item-row-label">
      First Name
    </label>
    <label for="state" class="item-row-label">
      State
    </label>
  </div>
  <div class="item-row">
      <input id="lastName" class="item-row-value" />
      <input id="firstName" class="item-row-value" />
      <input id="state" class="item-row-value"/>
  </div>
</div>

user_153726680
Related