CSS for Adjusting Parent Height Based on Child Content

I've been working on adjusting the height of the parent class to fit the child class perfectly without overflowing

Here is a snippet from my CSS file:

Parent

&__video
  position: relative;
  width: 471px;
  background: red;
  border-radius: 12px;
  @include box-05;

Child

.player {
  position: relative;
  width: var(--width);
}

And this is how I implemented it in HTML:

VideoEmbed.video-introduction__video(
  source-url="*****"
)

Just to clarify, VideoEmbed is a component that contains the styling for the child element.

cssvue.js

Answer №1

Just a heads up, I managed to resolve it by including display: flex, although I'm not entirely certain if this is the most appropriate solution.

&__video
  display: flex;
  position: relative;
  width: 471px;
  background: red;
  border-radius:12px;
  @include box-05;

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

An ELIFECYCLE error was encountered during the production deployment process, resulting in error number

I am currently struggling with a perplexing issue and urgently need to resolve it, so any guidance would be greatly appreciated. My project is built using Laravel and Vue, with Docker managing the image container. The application is deployed on AWS. The ...

javascriptnode.jslaravelvue.jswebpack

Broken styles when using Material UI with babel and the 'with styles' feature

We've implemented babel and lerna to maintain specific elements of our react web app separately. While the setup has been effective thus far, we're encountering styling issues when generating the static build. The main project is not processed t ...

cssreactjsbabeljsmaterial-ui

Why does the styling on my <a> tags in the footer only take effect when I apply padding to the form above?

It seems that when styling the <a> tag for the list in the footer, no changes occur even if correctly applying the style. However, adding padding to the form in the main part of the code causes the links in the footer to show the change. To see this ...

htmlcss

Creating dynamically generated nested text inputs with individual v-model bindings upon the clicking of a button

As a newcomer to vuejs, I am attempting to create nested textboxes dynamically with the click of a button. For a clearer explanation, please refer to this jsfiddle link: https://jsfiddle.net/avi_02/qLqvbjvx/ Let's use an analogy to grasp the iss ...

javascriptvue.js

What is the best way to transform this into an HTML readable code?

While browsing through a template, I came across this code and I'm unsure of how to get it functioning. I've tried removing the comments, but unfortunately it doesn't seem to be working as expected. li.dropdown.navbar-cart ...

javascriptphpjqueryhtmlcss

implement a data update feature in a Vue application using methods and Axios to manipulate

I am having trouble displaying data on a graph in my web interface using Vue js. I am fetching data from the backend to the frontend with axios, and although I can display an empty graph, the passed data is not showing up. Can someone please help me iden ...

htmlvue.jsmethodsaxios

Specify the CSS bundle during the compilation of a Vue application

I am faced with the challenge of using a single code-base for my Vue application, but needing to compile it with different styles depending on the end user. Each end user (which in this case refers to a group or organization) has their own specific CSS fil ...

cssvue.jsnpm

Issue with Angular 9 Json pipe not showing decimal values

My JSON data looks like this: this.data = {"eoiStatistics": [ { "dateRange": { "explicitStartDate": "1997-01-01T00:00:00", "explicitEndDate": "2019-07-01T00:00:00" }, "outstandingApplicationCount": 0.0, "pendingApplicationCount": 24.0, " ...

htmlcssangularpipeless

Vue 3 - Using Emit Functionality in a Reusable and Composable File

I'm trying to utilize the emit function in my file called useGoo.ts import Swal from "sweetalert2/dist/sweetalert2.js"; export default function useModal() { const { emit } = getCurrentInstance(); function myId() { emit('id&ap ...

javascriptvue.js

Creating a dynamic and adaptive horizontal SVG line for your website

Understanding how SVGs function is still a bit unclear to me. I know that the viewBox property plays a role in scaling SVGs, and I have come across advice suggesting not to specify height and width attributes when creating responsive SVGs. While there are ...

htmlcsssvg

Tips for preventing the appearance of a horizontal scroll bar when utilizing the FlexLayoutModule in Angular

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-property-feed', templateUrl: './property-feed.component.html', styleUrls: ['./property-feed.component.scss'] }) export class Prope ...

cssangularangular-flex-layout

Utilizing Symfony 4, Twig, and VueJS for Seamless Routing between Components

Currently diving into Symfony 4 with Twig templating and leveraging VueJS for UI elements. I've created a simple component in a .vue file to display tasks, which at the moment just generates a basic table. // task-list.vue <template> < ...

symfonyvue.jstwigvuejs2

Using Java Swing to apply HTML styling to text strokes

I have come across this code snippet for a Java swing JLabel: "<html>\n" + "<head><style>\n" + "p { color: white;\n" + " text-shadow:\n" + " -1px -1px 0 #000,\n" + " 1px -1px 0 #000,\n" + " -1 ...

javacssswing

The fields in the row of the Rails form_tag are overly spacious

My login form in Rails 4 with Bootstrap 3 is giving me trouble. It doesn't format well on any device, especially smaller screens where it becomes unusable. I suspect the huge right margin of the rows is to blame, but I can't figure out the root c ...

htmlcssruby-on-railstwitter-bootstrap

When I toggle the div to close on mobile, I want it to show on desktop

My attempt at creating a toggle button to hide and show content was not successful. I struggle with coding in Javascript/Jquery. In the desktop view, the description displays perfectly (see image here), but in mobile view, there is a button to toggle hidi ...

javascriptjqueryhtmlcss

What is the most effective method for disregarding undefined values?

Implementing a project using Vue.js and Vuex, I am retrieving data from an API that functions as a content-management system. The product class in the CMS possesses numerous properties that can be populated by the user, such as; { "title": &quo ...

javascriptvue.jsvuex

Use flex to position a div at the center of the screen

Looking for some guidance on using flex as a newbie here. Currently working on designing a website page and struggling with centering a div tag on the page using flex. Appreciate any assistance or advice you can provide. Thank you! ...

htmlcssflexbox

Troubleshooting a problem with HTML table styling

Could someone please help me identify the issue with this code snippet? I am aiming to style the table with a border, background color, and align it to the top. I appreciate any assistance. Thank you. <td style="border: solid 2px #111111;" bgcolor="#d ...

htmlcss

What is the best way to prevent the child elements from inheriting the hover effect of the main container?

Looking to spice up the appearance of the div element that holds the product's image, SKU, and price. Adding a hover effect to the main container causes the child divs to inherit it, resulting in separate hover effects on each child div. Sample HTML ...

htmlcss

Ways to prevent a background image from repeating in an HTML email without relying on CSS

I created a custom background picture, but when I tried to use it with CSS in Outlook, it didn't work. So, I added the picture directly into the body tag which allowed me to display it, but now it is repeating. Even after trying to prevent the repeti ...

htmlcss