Skip to main content

All Questions

Tagged with or
Filter by
Sorted by
Tagged with
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 ...
Greg Gum's user avatar
  • 37.7k
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 ...
8HoLoN's user avatar
  • 1,142
-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>. ...
lvjsmn's user avatar
  • 86
-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 ...
Arpit Mishra's user avatar
-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 ...
root's user avatar
  • 2,360
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 ...
Reacting's user avatar
  • 139
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-...
Ryan Buckley's user avatar
-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 ...
MR Mornamo's user avatar
-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 ...
user3103982's user avatar
-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 ...
Adolph Frederic's user avatar
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: ....
thadeuszlay's user avatar
  • 3,005
-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 ...
McMurphy's user avatar
  • 1,284
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 ...
Rajaraman Subramanian's user avatar
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 ....
mini1012's user avatar
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,...
Pink lake's user avatar
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 ...
John Dinos's user avatar
-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 ...
Neeraj Kumar's user avatar
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 ...
febLey's user avatar
  • 240
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 = [ ...
user2741831's user avatar
  • 2,376
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 ...
Ido Traini's user avatar
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 ...
Codey's user avatar
  • 1,223
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 ...
Sainath Shetty's user avatar
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 ...
Nisha Shajahan's user avatar
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-...
RrR2010's user avatar
  • 91
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 ...
Rafael's user avatar
  • 1
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; } ....
fguillen's user avatar
  • 38.6k
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 ...
OscarG.'s user avatar
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 ...
Zachary Lund's user avatar
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; ...
Andrew Parks's user avatar
  • 8,047
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 ...
Ranjith M's user avatar
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 ...
Spook's user avatar
  • 25.9k
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 ...
RedlandsDave's user avatar
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 ...
Siddhesh Kulkarni's user avatar
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 { ...
Ahmed Fawzi's user avatar
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 ...
Aditya Basak's user avatar
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-...
dariusz's user avatar
  • 563
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, ...
Mattia Merico's user avatar
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 ...
loqueelviento's user avatar
-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-...
user2991837's user avatar
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; ...
Kumi ho's user avatar
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,...
3rippleflex 's user avatar
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, ...
Tim Wiel's user avatar
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 ...
Rodrygo's user avatar
  • 13
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 ...
rennoib's user avatar
  • 19
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 ...
alexey.m's user avatar
  • 1,349
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" ...
Silvio Aliatis's user avatar
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 ...
Nitheesh's user avatar
  • 19.9k
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 './...
Andrey's user avatar
  • 9
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> ...
g0ku's user avatar
  • 3
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 ...
Qwertiy's user avatar
  • 21.3k

1
2 3 4 5
454