All Questions
22,681 questions
0
votes
2
answers
48
views
How to constrain image to available space in a flexbox
I am trying to get up to speed on using the Flexbox.
What I want to do is have a navigation panel on the left and a dynamic area on the right.
There is an issue with the dynamic area. The image does ...
0
votes
0
answers
9
views
Vertical scroll on sub flex element to match the height adjacent element [duplicate]
I have the following snippet with 2 divs in a flex container. The 1st one has 2 sub divs with a fix size (to mock content), the second one has only 1 mock content. Currently the height of the ...
-3
votes
0
answers
40
views
How to allow resize of img with flexbox within a div [closed]
This is likely a duplicate question but I couldn't find any useful tips for my case.
Here, I want an <img> element to resize its width and height in a flexbox contained in a <div>. ...
-1
votes
0
answers
42
views
Issue with CSS for overflow for dropdown
I have created this dummy top nav bar, where i have multiple drop-down which can be scrollable on x axis via buttons if multiple . But when i open the dropdown it is being opened in scroll view for y ...
-1
votes
1
answer
23
views
Large floating element next to automatically sized elements
In HTML, an element is in flow or out of flow.
float: right can be used to take elements out of flow.
In-flow and out-of-flow elements can be combined, i.e. some elements can be in flow while others ...
0
votes
1
answer
41
views
How to position image in ImageBackground component?
I just want to place this image to the top of the screen with ImageBackground component of React Native, using this background image resizeMode='contain' (NOT cover) since the image is fit to ...
0
votes
0
answers
25
views
How to have a parent container shrink to fit contents, with a child that expands to a max-width [closed]
I want to have a parent container shrink to fit the contents of its children. This I've found is doable with either inline-block or inline-flex. I also want the children to be able to expand to a max-...
-1
votes
1
answer
35
views
Relation between <a> tag and image in CSS responsiveness
i am trying to resize a image(.logo) placed in a tag. But whenever i make the image smaller, the image is get small in size but the size of tag remains same. And the space between the image and next ...
-2
votes
0
answers
83
views
flex container has extra bottom gap when a card-body is inside, and container of the .row has fixed height [closed]
I have 5 cards which have display as flex in a row with class mrow.I have the row in a container with class mcontent.The height of the row is 571px.
.mrow{height:100%}
.mcontain{height:571px}
But ...
-2
votes
0
answers
42
views
How can I align my bootstrap carousel with the rest of the content on the page?
can someone help me understand why my carousel is still displaying on the left side as opposed to properly align with the rest of the content on the page. Please ping me if anyone can help, I did ...
0
votes
1
answer
49
views
How to center the whole block of a flexbox?
I have multiple DIVs (the DIVs can be generated from an array, so I don't know the number of DIVs beforehand) of different widths. I'm using flexbox with flex-wrap to order them like so:
....
-4
votes
0
answers
49
views
How to CSS constrain object tag with SVG inside containing div
If you look at this example you will see that if you turn the phone into portrait mode an click one of the right most yellow boxes (to relocate the arrow) you will see scrollbars appear.
I can prevent ...
0
votes
2
answers
50
views
text-overflow ellipsis issue in nested element along with tooltip in flexbox column direction [closed]
I have a two column layout with left section taking 80% width and right section taking 20% width.
In the right section, I have a list of items to be displayed with texts that can be bigger than the ...
0
votes
2
answers
52
views
flex space between doesnt work on a <a> container
So I'm making an e-commerce page with FlexBox, everything seems fine, even the children of my parent flex container .catalog, but when I need to set the justify-content: space-between on my child ....
0
votes
2
answers
39
views
Image causing column flexbox to overflow if fails to load
I'm puzzled by the following problem:
I created a flex row of fixed width with two elements:
a flex column of two elements: a image which has its width and length given in its html tag and a paragraph,...
0
votes
0
answers
68
views
Flexbox container wont take the entire width and height on my page
Hello everyone im trying to create an html page with a header, main, footer layout. Every element is inside a flexbox column container. The problem is that when im viewing the page with mobile toolbar ...
-1
votes
1
answer
37
views
How can I dynamically adjust a CSS grid layout for a memory game with a variable number of cards while maintaining responsive design?
I'm building a memory game and want to dynamically adjust the CSS grid layout to accommodate a variable number of cards. The challenge is to ensure that the card size remains consistent regardless of ...
0
votes
0
answers
31
views
div Element with fixed height and aspect-ratio doesn't have a width inside flexbox on Safari
I have a div element, that acts as image container, with an aspect-ratio and a fixed height. The img itself just aligns to that via object-fit.
The div element is nested within a figure, which itself ...
1
vote
1
answer
52
views
Making flexbox table layout line up with content
I'm trying to create a simple table layout using flexbox (so the table is properly responsive). I'm doing it like this (you need react and bootstrap):
export function UITest(){
const data = [
...
0
votes
2
answers
51
views
flex column that fill 100% space from header to footer
I'm learning html/css vanilla design.
My layout should be an header, a footer and 3 columns that fill all the space, whatever their content.
I'm thinking in a layout grid-based for the 3 columns, and ...
0
votes
1
answer
36
views
Make flex container shrink with children
I have a Flexbox container, which has two items where one of them collapses on clicking the container. The second item collapses perfectly fine and the first item takes up the remaining space.
However ...
2
votes
3
answers
57
views
Paragraph inside a flexbox is not getting centered
I have made a card container which contains an image and a paragraph.
I gave the card container display flex and align-items and justify-content both centre. The image got centered as expected but the ...
1
vote
2
answers
46
views
I am not able to increase the width of my flexbox
Problem
I am creating an image gallery using flexbox layout.
I want bigger/proper width for images displaying in flex box layout.
It is getting shrunk up and I cannot understand why. I would like to ...
1
vote
2
answers
79
views
Position a div element relative to its previous sibling (piano keyboard styling)
I'm developing a piano keyboard using HTML + CSS.
My code structure is as follows:
:root {
--piano-width: 600px;
--piano-height: 150px;
--piano-keys-gap: 1px;
--piano-black-keys-height-...
0
votes
0
answers
7
views
How to Create a Responsive Grid Layout Without Gaps Using Flexbox? [duplicate]
I'm trying to create a responsive grid layout using Flexbox, but I'm facing an issue where gaps appear between boxes in different rows, depending on their height. The desired layout should resemble ...
0
votes
1
answer
52
views
Div stretch to all the available space but no more
I have a simple setup with:
# Header
# Content
# Footer
I want Content to stretch to all available space (if it needs more show scroll), and it works:
body {
margin: 0;
font-size: 2em;
}
....
0
votes
0
answers
63
views
Flexbox complex design
I’m working on a React project. I want to create a flex layout but I’m struggling to achieve the design I’m looking for.
Can you please tell me how would you do it? Or maybe recommend any other ...
1
vote
1
answer
50
views
Flex and Bison not accepting input file [closed]
I am writing a Flex & Bison program for a class, and I feel that I am almost done. However, when I try to run the program with an input file, it simply refuses to read it and has me input lines ...
0
votes
0
answers
15
views
Why does an absolutely positioned div within a flexbox collapse in width? [duplicate]
I'm trying to build an absolutely positioned popup, which is positioned relative to a flexbox parent.
Here is a minimal extract of my html:
<div id="a" style="display: flex; position: relative; ...
0
votes
2
answers
40
views
Align flex wrapped elements to vertically
I basically have couple of questions with n number of options, these options are under a flex container with flex wrap set to wrap, if the options are getting wrapped i want the wrapped elements to be ...
0
votes
1
answer
16
views
Is it possible to constrain width of item in flex-grow container? [duplicate]
Main layout of my webpage is laid out as flex flex-row. Left column contains side panel and right column set to grow contains the main content.
The problem is that when screen width is too small, wide ...
1
vote
1
answer
51
views
Controlling when a wrap occurs in a flexbox
I have a two column page, one skinny column and one fat column. I am using a flexbox to display them.
When I resize the browser width smaller, the wider div wraps almost immediately. I expected it to ...
0
votes
0
answers
13
views
Extend content height side by side [duplicate]
So here I have 2 column layout with some content like header, sub-title, horizontal rule, another text and a list. (Please refer to two screenshots attached)
The container (main column) is able to ...
1
vote
1
answer
36
views
How to make texts which are different in the number of characters start from the same place?
My design looks like the picture below not aligned well vertically
.results {
display: flex;
flex-direction: column;
height: 360px;
justify-content: space-evenly;
}
.results .box {
...
0
votes
0
answers
15
views
Input Box component and buttons are too small to apply md: despite having md:w-* classes
I'm working on a responsive navbar using React and Tailwind CSS for my course-selling website. The layout contains:
A logo on the left.
A search input box and search button in the right (visible only ...
0
votes
0
answers
22
views
Overflow scrolling on dynamic sibling div [duplicate]
I have html markup
<div class="wrapper">
<aside class="l-side">
<div class="l-content"></div>
</aside>
<aside class="r-...
1
vote
5
answers
53
views
How can I insert a box between 2 rows? I don't want that box starts at the beginning of a row, I want that start and finish in the middle of a row
Obviously is something more complicated but i'd like a clear and simple description
I tried with grid and flexbox layout, setted "align-self: center" to the right box, but nothing happens, ...
2
votes
0
answers
61
views
CSS flex column wrap inside flex row
I have a between keyboard and chair issue with CSS flexbox when nesting two flexboxes.
The body of my HTML document is a flexbox occupying exactly the viewport, so that main can stretch to what header ...
-3
votes
2
answers
56
views
Flexbox and max-width? Parent width is max-width when child is less wide [closed]
.row {
display: flex;
align-items: center; /* Centers items vertically */
background-color: yellow;
height: 100vh;
}
.column {
max-width: 400px;
background-color: red;
flex-...
0
votes
1
answer
67
views
Why is there a white space left under the div when I apply box-shadow? [duplicate]
I'm trying to make a page with 3 images, each one inside a div, but when applying box-shadow there is a gap underneath.
Image with example of the problem
<style>
body {
margin: 0;
...
1
vote
1
answer
26
views
Image-banner and link-wrapper not aligning to center in CSS grid layout when width is set on center-column container
I'm trying to center-align an image and a set of links in the center column of my navigation layout. When I don't specify a width for the .center-column element, the alignment works perfectly. However,...
0
votes
0
answers
16
views
Stacking / Tiling / Mosaic Flexbox columns with DIV text (not images) done with pure CSS [duplicate]
I've looked everywhere and are struggling for a solution to creating a mosaic layout with CSS only. I'm not even sure mosaic is the right terminology for what I am trying to do ... collapsing tiles, ...
1
vote
2
answers
53
views
How to align metadata (time and icon) in a chat bubble layout when text is short?
How it should look "the correct version"
How it looks, "the incorrect version"
The metadata looks ok when the text is long, however, when the text is short for example, the user ...
0
votes
0
answers
19
views
Flex row not working in React Native after reading all post here
I don't know what is wrong with my code, but always shows the < Text > under the < TouchableOpacity >. I tried to change everything in the code without results, nor about others similar ...
1
vote
0
answers
35
views
Two dynamic strings space distribution with CSS
Frontend newby here - got this task with 2 dynamic strings, one goes next to the other horizontally in a fix width container, one string aligned to the left, the other - to the right.
Feels like there ...
1
vote
1
answer
69
views
Pure css stacking card effect with sticky position, no javascript
I'm working on a section where these cards are stacked, the problem is that they do it using position: sticky and when the effect of cards is over, the cards go through the "sticky-header" ...
0
votes
3
answers
88
views
Outline not visible for inline elements
I have an anchor tag. I have given an outline to this anchor tag. But this outline is not visible unless the anchor tag has a display: flex.
Here in the below example, there are two anchor tags. The ...
0
votes
1
answer
23
views
Detect moment when element goes to the next axis in flex-wrap container
I have a code similar to the below code that I made up as a simple example to represent the question.
React component code:
import { useState, useRef, useEffect, useCallback } from 'react'
import './...
0
votes
1
answer
40
views
Prevent div to grow in flex mode
I have read a lot of posts facing this issue, and no solution works for me. The problem is very simple. Here is an overview of the structure:
<div id=mainDiv>
<div id=banner></div>
...
1
vote
1
answer
52
views
Flex strangely computes width when grid doesn't
The only difference here is parent, styles of subtree are completely the same.
Grid calculates the width of first element (section with green outline) correctly, but flex sets it to 0 and allows ...