Category "flexbox"

Bootstrap 3.3.7 "row" causing horizontal scroll bar

Ok ok, I know. This question has been asked a lot. But, so far, I have not found a working solution. I boiled my page down to nothing but this: <div clas

How can I order CSS columns horizontally instead of vertically for auto height elements?

Each of my columns has different heights. How can I order my column to horizontally instead of vertical using CSS? Also on hovering of each item, the height wil

Flexbox - center vertically second row

I'd like to position second row in the center of container, but I can't figure out how to make it. align-self works in horizontal direction only - even if flex-

Two-column vertical-numbered lists with Flexbox

I'm sure this must be a duplicate, but I cannot find any related answers because so many people are referring to flexbox elements as "lists", when they're not a

How to move Material UI tabs to the bottom of a parent like AppBar?

If you have <Tabs that are inside an AppBar, what would be the best practice for having the tabs at the bottom of a parent, so like at the bottom of the head

Three columns with equal height corresponding rows in each column

I need to create a layout in which you have three columns, in each column the corresponding row needs to have the same height. The requirements for this are. T

Why don't flex items shrink past content size?

I have 4 flexbox columns and everything works fine, but when I add some text to a column and set it to a big font size, it is making the column wider than it sh

Flex React Native -- How to have content break to next line with flex when content reaches edge

I have a list of icons inside my styled container that are displayed in a flexDirection:'row' but when there is more icons than width of view, they dont break t

How to enable a scrollbar on a flex item?

I have a flexbox-based layout with two panels (top and bottom) occupying 1/3 and 2/3 of the viewport, respectively. (Actually there are more panels, but I've di

React Native - Sticky footer at the bottom of container

I'm trying to make a <View> called footer stick at the bottom of the right container. Here is a live example:https://rnplay.org/apps/G3rHqQ If I make th

How can I make my flex columns have equal height in an absolutely positioned container?

I have absolutely positioned div.container. div.wrapper inside it. and two divs as flex columns in div.wrapper. These columns have backgrounds. How can I make t

How to have each item in my flex row remain square (same width as height) without using JavaScript [duplicate]

I'd like these letters to sit in the row, each letter div with same height and width. This is my demo of the problem https://codepen.io/daniel

How to make columns equal height if siblings are hidden?

I am trying for equal height columns and implementing this on a Bootstrap carousel for a testimonials page. I want the height of all carousel items to be the sa

How to fill vertical space with flexbox?

If .right item stretch height to any size, how to make .item elements inside .left to fill vertical space equally? From: To: .container { display:

Flexbox columns in ascending order

I'm working with some items in a list: <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</

Creating block buttons using Bootstrap in ReactJS

I want to create simple block buttons, that span the entire div. I am using react-bootstrap package to do this in React. Here is the code I am using:- <Conta

Flexbox child not reading height/width of parent

I was experimenting with flexbox and created this layout. I'm trying to get the middle white box that says "hey" to be 90% width/height of the parent but percen

Flexbox child not reading height/width of parent

I was experimenting with flexbox and created this layout. I'm trying to get the middle white box that says "hey" to be 90% width/height of the parent but percen

input / button elements not shrinking in a flex container

When using input and button elements inside a flex container, the flex and/or flex-grow properties don't seem to do anything. Code that demonstrates my issue.

Responsive circles in a row with flexbox

I want to draw 4 circles, being all 4 flex-items, and I need them to scale with the container they are in. I have seen some solutions where padding-bottom is us