same height children of overflow container-CodePudding

I have searched for available questions but didn't get my solution.

I am trying to set the height of all the elements of a horizontally overflowed container equal as that of the longest one.

body {
    
}
section{
    width: 300px;
    background: lightblue;
    overflow: auto;
    white-space: nowrap;
}
div{
    display: inline-block ;
    max-width: 150px;
    background: lightgreen;
    margin: 5px;
    white-space: normal;
    
    /* not working */
    height: 100%;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <section>
            <div>
                hi there how are you push just IV by Rd hi TX cu
            </div>
            <div>
                hi there how are you push just IV by Rd hi TX cu jdi HD so of fr edg of Dr edg KB hi
            </div>
            <div>
                hi there how are you push just IV by Rd hi TX cu
            </div>
        </section>
    </body>
</html>

As you see here, the second div is longest. The other divs should be equal to the second one. Also, I don't need a fix height.

CodePudding user response：

Set min-width on divs and make its parent flex that cant not be wrapped.

section {
  display: flex; /* new */
  flex-wrap: nowrap; /* new */
  width: 300px;
  background: lightblue;
  overflow: auto;
}

div {
  min-width: 150px; /* new */
  background: lightgreen;
  margin: 5px;
}

<section>
  <div>
    hi there how are you push just IV by Rd hi TX cu
  </div>
  <div>

    hi there how are you push just IV by Rd hi TX cu jdi HD so of fr edg of Dr edg KB hi

  </div>
  <div>
    hi there how are you push just IV by Rd hi TX cu
  </div>
</section>

I used min-width: 150px;. You may change the value.

CodePudding user response：

you could use the Flex layout.

section{
  width: 300px;
  background: lightblue;
  overflow: auto;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
div{
  display: inline-block ;
  max-width: 150px;
  background: lightgreen;
  margin: 5px;
  white-space: normal;
  height: 100%;
}