How can I stretch the height of child elements to fill the parent element except for text?

Question

I'm making a page and I have a situation similar to the one in the code snippet below.

* {
  font-size: 20px;
}
body {
  margin: 0px;
  text-align: center;
}
.page {
  display: inline-block;
  width: 500px;
}
.container {
  align-items: center;
  background-color: rgb(63, 63, 63);
  border: 2px solid rgb(244, 67, 54);
  display: flex;
  justify-content: center;
}
input[type=date] {
  background-color: rgb(191, 191, 191);
  border: 2px solid rgb(255, 192, 0);
  padding: 10px;
}
button {
  background-color: rgb(191, 191, 191);
  border: 2px solid rgb(255, 192, 0);
  margin-left: 10px;
  padding: 10px;
}
span {
  background-color: rgb(191, 191, 191);
  margin-left: 10px;
}

<body>
  <div class="page">
    <div class="container">
      <input type="date"><button>Button</button><span>Text</span>
    </div>
  </div>
</body>

Leaving the height of the container element as flexible to change according to the height of the tallest child element, how can I stretch the height of all the child elements except for text elements, so that they have the same height as the tallest element?

In this case the button should be the height of the date picker while the text should stay as it is.

If I remove the CSS property align-items from the container element the button does stretch but so does the text which is not desired.

I have lightly tried the answers from the question How to Vertical align elements in a div? with no avail to this specific case.

score 3 · Accepted Answer · answered Mar 02 '20 at 12:10

Remove the align-items: center; from the parent and apply align-self: center; to the text element.

* {
  font-size: 20px;
}
body {
  margin: 0px;
  text-align: center;
}
.page {
  display: inline-block;
  width: 500px;
}
.container {
    background-color: rgb(63, 63, 63);
  border: 2px solid rgb(244, 67, 54);
  display: flex;
  justify-content: center;
}
input[type=date] {
  background-color: rgb(191, 191, 191);
  border: 2px solid rgb(255, 192, 0);
  padding: 10px;
}
button {
  background-color: rgb(191, 191, 191);
  border: 2px solid rgb(255, 192, 0);
  margin-left: 10px;
  padding: 10px;
}
span {
  background-color: rgb(191, 191, 191);
  margin-left: 10px;
  align-self: center;
}

<body>
  <div class="page">
    <div class="container">
      <input type="date"/>
      <button>Button</button>
      <span>Text</span>
    </div>
  </div>
</body>

Oh, so it's easier than I expected. That's perfect, thank you. So quick that I have to wait to accept the answer. — user7393973, Mar 02 '20 at 12:12

score 0 · Answer 2 · answered Mar 02 '20 at 12:19

You can also use align-items: stretch; to the .container

* {
  font-size: 20px;
}

body {
  margin: 0px;
  text-align: center;
}

.page {
  display: inline-block;
  width: 500px;
}

.container {
  align-items: center;
  background-color: rgb(63, 63, 63);
  border: 2px solid rgb(244, 67, 54);
  display: flex;
  justify-content: center;
  align-items: stretch;
}

input[type=date] {
  background-color: rgb(191, 191, 191);
  border: 2px solid rgb(255, 192, 0);
  padding: 10px;
}

button {
  background-color: rgb(191, 191, 191);
  border: 2px solid rgb(255, 192, 0);
  margin-left: 10px;
  padding: 10px;
}

span {
  background-color: rgb(191, 191, 191);
  margin-left: 10px;
  align-self: center;
}

<body>
  <div class="page">
    <div class="container">
      <input type="date" />
      <button>Button</button>
      <span>Text</span>
    </div>
  </div>
</body>

From what I tested having `align-items: stretch;` or not doesn't make a difference in your code, `align-self: center;` does, which is what's used in the other answer. — user7393973, Mar 02 '20 at 12:31

How can I stretch the height of child elements to fill the parent element except for text?

2 Answers2