<div class="flex-container">
<div class="red hover flex">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </h1>
</div>
<div class="blue hover flex">
<h1>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h1>
</div>
<div class="green hover flex">
<h1>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </h1>
</div>
</div>
.flex-container {
width: 100%;
height: 300px;
/* create the flex container */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.flex {
flex: 1;
}
.hover:hover {
flex: 4;
}
/* colours */
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.orange {
background-color: orange;
}
Greetings! I am seeking assistance in maintaining the text width within a container regardless of its size. The content should stay on a single line similar to the format demonstrated in the provided link below. Can anyone provide guidance or support? Thank you in advance. https://www.example.com