I have the following code example scenario , and I know why content1 cannot scroll (because content_wrap1 does not have its own height,so that height:100% of content1 is not work) , But why can content2 scroll? does a flex item have its own height? <template> <div class="wrap1"> <div class="content_wrap1"> <div class="content1"> <div class="item">123</div> <div class="item">123</div>

I have a column of H2 elements that I rotate through with a CSS transform. I need the background color of the H2 element to only cover the H2 element and text. There is a line running behind the text and right now the shortest element’s background is the length of the longest and covers

I’m quite struggling with this one. I found an article with this: https://css-tricks.com/lets-create-an-image-pop-out-effect-with-svg-clip-path/ , I alredy tried the steps. The problem is that I’m using blob as the maskBackground, I’m having some problems with the paths. I wanted to achieve the pop-out effect using the svg I have. Here’s my svg: <svg viewBox="0 0 200

For Firefox’s userChrome.css and userContent.css files (thus no JavaScript available), how can we detect on which operating system the Firefox web browser is running? At the least, we need to differentiate between Linux and Windows; also recognizing macOS is a bonus, but not required. I thought there was a way to accomplish this using @media

I am working on a video conferencing application and user can toggle between having their camera to be Picture-in-Picture or just on the web page. For the webpage I used a video element that would use getUserMedia stream as the srcObject and would display the current webcam. However, as the stream from the webcams are

I’m working on a countdown component in React using Tailwind CSS and inline styles. I want to apply a multi-colored shadow effect around a container, but I can’t seem to get the colors to show correctly. The box shadow either shows only one color (orange) or doesn’t appear as expected. 'use client'; import React, {useState,

For example, the button press animations I use on my site are triggered with :active or :hovers. As far as I’ve tried, these never work instantly in Safari and Chrome on the mobile platform. If I just press and hold it some of it works. How can i again from this problem? I tried many

It’s been a loong time since I did HTML and CSS, and I’m playing around with grid-layout, but can’t get it to work. I have made a burger menu, that, when I click it, should toggle the display attribute and show the menu tag. This works, but because the grid is also inside a element,

I am working on a school project in react where the goal is to build a website which will display movies collected from a database. When a movie is clicked a small description box is opened underneath. The problem I’m having is that the box that appears is the same width as the movie box,

Trying to make a very responsive webpage that features a #details section next to a #comments section. For different screen sizes, the #details section will grow or shrink automatically to best fit the .details. I would like the #comments section to match the height of the #details section. Inside my #comments section however, I would