same height children of overflow container

Issue

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.

Solution

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.

Answered By – mahan

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published