Hovering over a container will display the text in a single line

<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

Answer №1

Ensure your flex item remains at a fixed size when hovered, preventing text from breaking into multiple lines.

To clarify, the desired outcome is:

  • Show multiple flex items with text aligned side by side
  • When hovering over an item, it expands until all text fits on one line
  • The expansion of the hovered item should be animated, similar to the provided example

Typically, flex items aim to reach their maximum content size unless instructed otherwise. To maintain a stable size on hover, we must prevent them from shrinking further when space is limited. This adjustment will be made within :hover.

Please be cautious that forcing text onto a single line while other items can't shrink could result in overflow beyond the screen width.

Follow this solution for the above scenario:

.flex-container {
  height: 300px;
  display: flex;
}
.flex-item {
  flex: 1 1 auto;
  /* transition: flex 500ms cubic-bezier(0.09, 0.76, 0.52, 1); */
  transition: flex 300ms;
}
.flex-item:hover {
  flex: 1 0 auto;
}
/* colours */
.red {
  background-color: lightcoral;
}
.blue {
  background-color: lightblue;
}
.green {
  background-color: lightseagreen;
}
<div class="flex-container">
  <div class="red flex-item">
    <h1>It is a long established fact that a reader will be distracted</h1>
  </div>
  <div class="blue flex-item">
    <h1>It is a long established fact that a reader will be distracted</h1>
  </div>
  <div class="green flex-item">
    <h1>It is a long established fact that a reader will be distracted</h1>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Different custom background images for every individual page in Nuxt

Looking for a unique background-image for each page in my app is proving to be challenging. Currently, I have defined the background-image in style/app.scss. @import 'variables'; @import 'page_transition'; @import url('https://f ...

the iframe is not properly displaying the embedded responsive page

The primary webpage incorporates the responsive mobile page created with the JQUERY SUPERSLIDES plugin. The mobile page appears correctly when viewed directly on an iPhone using Safari. However, when it is embedded in an iframe, it does not display as expe ...

Tips on eliminating the gap between two flex items while adjusting their size

Can anyone assist me with my code? Here is the current version: https://i.stack.imgur.com/00RGC.png I want it to resemble this: https://i.stack.imgur.com/JSclD.png You can find all my attempted media queries in the CSS comments at the end. Please let m ...

Ensuring Consistent Item Widths in a Loop using JavaScript or jQuery

In my code, I created a function that dynamically adjusts the width of elements in a loop to match the widest element among them. // Function: Match width var _so20170704_match_width = function( item ) { var max_item_width = 0; item.each(function ...

minimize javascript syntax (stackoverflow 2022)

I'm struggling with this puzzle game. Sometimes, when I start a new game, the pieces get shuffled incorrectly. I tried adding a function to fix it, but it doesn't seem to be working. It's really frustrating and I want to simplify the code as ...

Loading New Page When Iframe is Loaded

I am currently working with an iframe that reflects the appscript I have created. Is there a way to automatically redirect the user to a different page when they change a link or submit a form within the iframe? <div class="embed-responsive em ...

Displaying the second div once the first div has loaded, then concealing the first div

Current Approach: There are two divs occupying the same space, with div1 set to display:block and div2 set to display:none When a tab is clicked, jQuery hides one div over a period of 2000ms and reveals the other div. Challenge: The goal is for the ...

Dynamic JavaScript tool

Does anyone know which library is being used on the website linked here? I am working on a project similar to this and would appreciate if anyone can identify this library for me. Thank you in advance. ...

What could be causing the show button to change its style every time I click it?

I'm a beginner in the world of JavaScript. I have been working on customizing the "show more" button and encountered an issue. I managed to add text and a down arrow below the button, but when I click it, another button labeled "I don't know how ...

Expanding divisions vertically without the constraints of fixed heights

Instead of resorting to fixed heights and absolute positioning with top: and bottom:, I'm challenging myself to find a CSS solution without using those methods. I want to explore different ways to solve this problem and enhance my skills. I have a st ...

PHP: Sending multiple values under a single name

Here's the code I'm currently working with. It includes a form with 6 inputs. The last 3 inputs are named firstanswer, secondanswer, and thirdanswer. <form action="addsurvey.php" method="post"> <input type="text" name="surveyname"> ...

Incorporating a class into ever-changing Bootstrap Table rows

Looking to enhance my table rows with a class, excluding the header. Struggling to find a way to do this. Any ideas? This is the table in question: <table id="table" class="hidden table table-bordered table-striped table-hover"> <thead> ...

Having trouble with the mouse trail code on codepen.io

I am currently attempting to integrate this specific CodePen sample into a Hugo template called Somrat Theme. I'm facing challenges in deciding where to place the HTML file; only the 'no cursor' section should go into style.css, and I need ...

Adjust the tooltip image alignment to be offset from the cursor and appear at the bottom of the page

After creating a code snippet for image tooltips on text hover, I encountered an issue on my website where the bottom of the page expanded to accommodate the images. Is there a simple way to align the cursor at the bottom of the image when scrolling to the ...

Troubleshooting textarea resize events in Angular 6

In the development of my Angular 6 application, I have encountered an issue with a textarea element. When an error occurs, an asterisk should be displayed next to the textarea in the top-right corner. However, there is a gap between the textarea and the as ...

Centered title in side menu for Ionic 3

I recently utilized the Ionic CLI to create an Ionic project. The version I am working with is Ionic 3. Currently, I am facing a challenge in centering the title image. Any assistance on this matter would be greatly appreciated. <ion-menu [content]=" ...

How to Add Catchy Titles to Your Menu Items on Silverstripe CMS?

Hey there! I'm currently working with Silverstripe CMS using the "Simple" template. I'm interested in finding out how to add subtitles to my menu items. Here's the current structure of my navigation template: <nav class="primary"> &l ...

is it possible to adjust the height of a tableRow in mui?

I recently created a table component using Mui. I've been attempting to adjust the height of the tableRows, but so far I haven't had any success. Below is my code snippet: import React, { memo } from "react"; import { ActionItemType, ...

designing the border at the bottom of the existing menu selection

I am trying to enhance the look of my current-menu-item div by adding a border at the bottom. It seems simple enough to achieve this by simply including the border in the div. However, I'm facing an issue with the width and position of the border. Ide ...

What is the best way to include a search box in the mobile view between the brand and menu toggle?

Is there a way to place the search bar between the brand and menu toggle on the mobile view without it appearing on a separate row either under or over the navbar? I've been trying to override some Bootstrap CSS but haven't found a solution yet. ...