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