Conceal multiple divs at the same time based on their largest dimension

I am facing an issue with two divs, each containing two nested divs: https://i.sstatic.net/QFMiU.png

<div class="hide">
    <div>
        Variable size
    </div>
    <div>
        Text1 (also variable size)
    </div>
</div>
<div class="hide">
    <div>
        Different variable size
    </div>
    <div>
        Text2 (also variable size)
    </div>
</div>

In case the screen size is small, I want the texts to be hidden: https://i.sstatic.net/XJtFL.png

To achieve this, I have applied the following CSS:

.hide {
   display: flex;
   height: 100px;
   flex-wrap: wrap;
   overflow: hidden;
}

However, if the size of the first text is too large, but the second one is not, it results in the following layout: https://i.sstatic.net/fTXjN.png

My goal is to hide both texts simultaneously.

Is there a solution (without using jQuery) to address this issue? I would prefer a CSS or SASS solution, but using JS (I utilize Angular) is also acceptable.

Answer №1

To achieve the desired layout, implement the display flex property as shown below

.hide { height: 100px;  display: flex; flex-wrap: wrap; overflow: hidden; }

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

Tips for receiving a reply from a post request

After successfully making and completing a post request, I'm wondering about using console.log(res.valor) in the code to display the data: consultarCorreio(){ this.cartS.cart.valorTotalItems this.cartS.getCorreiosPrazoPreco(this.cartS.cart.pesoTot ...

Create unique names by merging a selection of words

I'm looking to create a feature where users can input 2 or 3 words into text fields, and upon submission, those words will be combined in various ways. It's similar to a business name generator where you enter words and receive potential business ...

Move the aircraft across the display in a lively animation

I need help creating an animation where a plane flies across the screen, exits from the left side, and re-enters from the right side in a continuous loop. How can I achieve this effect to make the plane fly endlessly across the screen? Here is my code: ...

Allowing Angular2 Components and their Sub Components to access a shared instance of ngModel within a service

Currently, I have been working on constructing a complex view that requires multiple functionalities. To ensure proper organization, I have divided it into various custom components. I don't want to go into great detail, but I have managed to make it ...

React: The received value for the prop type must be a function, but it was an object

I'm stuck trying to make sense of this error message, and my online search has hit a dead end. Any insights would be greatly appreciated! Attention: Prop type validation failed - expected prop type `leoInfo` to be a function from the `prop-types` pack ...

Error Encountered with Visual Studio Community Edition 2019 and AspNetCore 3.1 Angular Template

When trying to create an AspNetCore 3.1 Angular template with Authorisation for individual accounts in Visual Studio Community Edition 2019, I encountered an error in the error list: The error message states that Package AutoMapper 9.0.0 is not compatible ...

Regardless of the circumstances, the Node.js PATCH request will always run

Apologies if the title is unclear, I struggled with how to phrase it. I encountered an issue with a PATCH request designed to update a value in my database: although it returns a "working" status (200), the actual update does not occur. I have a .route(&ap ...

How can I design a search box similar to the one on the android.com website?

Is it possible to replicate the search box effect on the Android website, where the menu items fade out and the search box expands upon clicking the search icon?view image here See the difference before and after clicking the search icon ...

"Error: The dist directory is missing in the Angular Docker File

I am in the process of Dockerizing an Angular project and here is my Dockerfile: # 1. Building the Angular app using Node.js FROM node:12 as builder WORKDIR /app COPY package.json package-lock.json ./ ENV CI=1 RUN npm ci COPY . . RUN npm run build-web -- ...

Creating a custom header in React for making AJAX requests

Need help setting header in Ajax Request using axios import React, { Component, PropTypes } from 'react' import { Link, browserHistory } from 'react-router' import { connect } from 'react-redux' import axios from 'axios& ...

Passing in additional custom post data alongside serializing with jQuery

function MakeHttpRequest( args ) { var dataToSend = "?" + $("form[name=" + args.formName + "]").serialize(); $.ajax({ type: "POST", url: args.url + dataToSend, data: { request: args.request }, su ...

Error in NVD3 causing charts to be inaccurately rendered

While utilizing a stacked area chart in the Stacked display mode, there appears to be an issue with the shading under the graph, particularly on the left side of the displayed plot below. We are currently working with d3 v3.4.9 and nvd3 v1.1.15b. Do you ...

Encountering difficulties in retrieving the JSON data from the web service

My external web service contains JSON data which has been validated using the JSON Validator website. However, I am facing an issue where the success function in the code below is not running at all. The web service necessitates that the email and password ...

Refreshing an Angular2 page is triggered by the update of a specific property

Just starting out with Angular2 and I'm puzzled as to why my page keeps refreshing when I try to set some properties from form data. Below is the component snippet: import { Component } from '@angular/core'; import { Credentials } from &ap ...

Utilizing jQuery for AJAX requests on a timed loop

I'm puzzled by a situation involving an AJAX call within an interval. It seems that the code doesn't work as expected, and I'm wondering why. Initially, I had this code snippet which wasn't functioning properly: setInterval($.ajax({ ...

Tips on organizing a JSON object for a JavaScript project

For my project, I am designing a data structure that utilizes JSON. My goal is to create an efficient method for searching and editing the JSON object. Which structure would be considered standard in this scenario? Is there a preferred way to implement eit ...

What is the reason that modifying a textarea causes the AJAX loading of content to be interrupted?

I am currently developing a feature that allows users to quote comments on my website. When a user wants to reply to a specific comment, they can simply click on the "quote" button next to that comment. This action triggers a script that adds the quoted co ...

Exploring the versatility of combining CSS classes with MUI 5 SX prop

Is there a way to use multiple CSS classes with the MUI 5 SX prop? I've defined a base class for my Box components and now I want to add a second class specifically for styling the text inside the Box. When I try to apply both classes like sx={styles. ...

What is the best way to show the current date and time?

To filter out and display only the date from the array that is the largest compared to the current date, all dates are displayed. const states = States.select().exec() var curr = new Date(); for (var i = 0; i < states.length; i++) { var maxDate = ...

Ways to clear the time attribute from an ISO DateTime in date format

How can I remove the time attribute from a date in the format 2016-05-24T05:07:57.756Z and set it to something like 2016-05-25T00:00:00.000Z? Any assistance would be greatly appreciated. ...