Subscribe to RSS

Question 1

I got a layout that is two columns where the right column will contain some text and a header. The header should also have the possibility to either remain in its column or span across both columns ...

Question 2

To simplify a complex CSS issue, I’m trying to place three elements inside a vertical flex container: two fixed-height divs, and in the middle a div that should keep a specific aspect-ratio. Here is a ...

Question 3

I've got some short flexbox items and some long/tall items in a multi row (flex-wrap) container with flex-direction: row. Depending on which row they appear in, I'd like to align the short items ...

Question 4

I'm trying to create a hand of cards effect where the cards overlap each other, similar to how cards look when you're holding them in your hands. I'm using a flex container to center the cards ...

Question 5

I have a container with multiple items displayed using CSS Flexbox, with flex-wrap: wrap and justify-content: center so that the items are visually centered and wrap responsively. Each item has a ...

Question 6

I want to display a fullscreen picker, which contains a header and a list. Currently my view hierarchy, starting at the Portal, looks like following: <Portal> <Modal visible={...

Question 7

The issue I’m facing is about vertical alignment inside a GrapesJS component, but the problem can be reproduced even without GrapesJS. Here is a small, runnable example showing the exact behavior: <...

Question 8

I want to create a grid with repeated columns. The columns should be as large as the children's content and then the remaining space in a track should be distributed. I thought I could achieve this ...

Question 9

In this sample HTML, the child flex item "B" sits next to "A" despite the parent having a flex-direction of column. Removing height: 100% of child item "B", changing the ...

Question 10

I have a flex column layout where I need to show only one of two states (table, empty) at a time, and the active state should expand to fill all available space. The empty state works perfectly, but ...

Question 11

I have this little issue but I can't figure out what it is, could someone take a look and enlighten me - basically, I'm building a website with bootstrap and can't figure out why do I have this little ...

Question 12

The design I'm working has an chip element with very long words. (French) The chip is part of a flex row element and may not be longer than 250px. If the content is shorter than 250px, it should ...

Question 13

I am using the solution given in How to reduce vertical space between items inside flex container? which worked well. But when I added mathjax related item, now alignment is broken for some reason. I ...

Question 14

I am using this setup in HTML <body> <div class="content"> ... the whole web page goes here </DIV> </body> Where content class is .content { background: ...

Question 15

I like to have top bar navigation with multiple items in it and user name at the end, in one line But when screen is smaller pop up user name above navigation In wide screen something like this [item1]...

Collectives™ on Stack Overflow

How to respect other elements when breaking out of container?

CSS aspect-ratio inside a column flex container takes more than parent's height

Flexbox: align-self depending on row

Make overlapping flex items stay centered as a group

CSS Flexbox Issue

React Native Paper - flex view bleeding views downwards

How to vertically align a GrapesJS component without converting its parent to flexbox? [duplicate]

repeat(auto-fit, minmax(auto, 1fr) is not valid syntax

What causes a flex item to sit next to another instead of stack, when its height is 100%? [duplicate]

Table body not expanding to fill available space in flex column layout

Extra space on the right hand of bootstrap header

Flex-shrink not working as expected in combination with very long words [duplicate]

Problem using flex container with mathjax inline math

How to reduce vertical space between items inside flex container?

html css navigation top bar "wrapping up" [closed]

Hot Network Questions