Questions tagged [flexbox]

CSS3 module for flexible layouts providing a broad range of options for aligning elements while eliminating the need for floats and tables.

1
vote
0answers
10 views

Using flexbox to dock scrollable container with tab panel (Office UI Fabric Pivot) style layout

I have a layout problem with the Office UI Fabric components I'm using. This may or not be specific to components in that framework, but I'll phrase this as a general HTML/CSS issue with flexbox. In ...
0
votes
1answer
40 views

CSS Issue with dynamic width box

I have a layout as shown below <div style="display: inline-block"> <div id="fieldDiv" style="box-sizing: border-box; position: relative">Div with dynamic width (Has field with label/...
0
votes
1answer
27 views

align-self: flex-end breaks on mobile zoom

I have a standard layout consisting of header, content and footer: ----------------- | header | |---------------- | | | content | | | |---------------| |------...
2
votes
2answers
23 views

Layout, where many containers need to take up rest of space but one inner scroll. CSS

I have a problem that I have spent many hours on and could not find a solution in any way. I will link the code in CodePen. It is just a subset of my layout. This is the reason for some of the root ...
0
votes
3answers
55 views

Why isn't my chessboard wrapping around using flexbox? [duplicate]

I'm trying to make an 8by8 chessboard: https://codepen.io/sammyslamma/pen/gJeOwY .flex-container { display: flex; flex-flow: row; flex-wrap: wrap; height: ...
4
votes
3answers
36 views

Flex-direction column not working as expected [duplicate]

I have the following markup: <div class="container"> <div class="logo"></div> <div class="search"></div> <div class="button"></div> </div> CSS (...
0
votes
0answers
20 views

Problem with Bootstrap 4 footer when used with Angular

I'm trying to make Bootstrap 4 footer stick to the bottom of the page. I am setting mt-auto class on the footer element and flex and h-100 on html and body. It works as expected if all code is ...
0
votes
1answer
20 views

Overflow makes flexbox unresponsive

Adding overflow style to a flexbox element makes it unresponsive, below is the code: .projects-wrapper{ display: flex; flex-wrap: wrap; justify-content: center; text-align: center; ...
0
votes
1answer
20 views

Generating FlexBox layout with Button

How can generate the flexbox layout with button please check the attach image. Any library available? Or can make with collectionView.
2
votes
4answers
68 views

Arrangement of elements in html

Is possible to achieve this structure using html + css ? But instead of having that vertical space between orange blocks I want to be one in the top of another. I have used flex and grid but not ...
1
vote
3answers
41 views

Double row with same height in flexbox

I've created a table with the first column using two rows, so the following columns will have two rows, but with the same height. Some cells will have 2 or more lines and other none. So, I want them ...
0
votes
0answers
29 views

Text is truncated in Firefox when using overflow-y: auto

I am experiencing an issue with a text being truncated inside a div with a vertical scrollbar. This doesn't happen in Chrome browser or if you make scroll bar always visible via overflow-y: scroll. ...
3
votes
0answers
47 views

Get a layout with items with different heights in a single row using flexbox [duplicate]

I have been trying to get this going row-wise using flexbox. But as I have been researching, I guess I can't get it using flexbox. I have come across some answers that are suggesting to use the grid ...
0
votes
3answers
33 views

Why do my field-set containers overflow at mobile-view, but not at larger screen sizes?

I'm creating a mobile-first responsive website using forms. This is the desired mockup I need to create after 769px. https://ibb.co/LQ0Gwt7. Here is the desired mockup for 769px and below: https://ibb....
2
votes
2answers
35 views

Incorrect size of flex child with an image

I have a similar case in my project: <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .wrapper { display: flex; ...
0
votes
2answers
44 views

How to vertically align and horizontally stretch multiple inputs using only bootstrap flex?

As a learning exercise, I would like to use only Bootstrap Flex (or CSS3 flexbox) to vertically left-align and horizontally stretch the input fields. I know about Bootstrap Grid (and CSS3 grid layout) ...
-1
votes
0answers
44 views

Give last child style but only if pattern is followed

I have created a flexbox layout which is dynamic. I am styling every even element so that it's styled with a background colour (checkerboard style). However, when there is a stray element at the end ...
0
votes
1answer
35 views

How do I shorten a flex item in a form without breaking the layout?

I'm creating a mobile-first responsive website using forms. This is the desired mockup I need to create after 769px. https://ibb.co/LQ0Gwt7 Under contact information, How do I shorten the zip input ...
0
votes
1answer
48 views

How do you set the last 'div' in another 'div' at the end flexbox?

How do you set the last 'div' in another 'div' at the end with the changing number of elements in pagination? I have 12 elements. During pagination, I have set the number of items for example 5 when I'...
1
vote
2answers
28 views

Flex item with padding overflows container [duplicate]

The issue is that when I add padding to a div that uses flexbox it goes outside the parent element when the width of the child element is 100%. Why is that? Thanks! I noticed that the issue is fixed ...
-2
votes
1answer
33 views

Flexbox: elements collapsing - the best approach?

Consider the following: Consider this to be a full, 1920px screen. The div wrapping the texts and buttons seen in A is a flexbox. When I resize the screen, the text and buttons squeeze as much as ...
0
votes
0answers
50 views

CSS flex box can't set second flex item width properly (angular7)

On an angular7 app I am trying to get the correct width for a bar chart. The .bar width property has a vw unit. The issue is that it is based on the parent width (.bar-container) and I want it to be ...
4
votes
2answers
74 views

Same behaviour but using CSS grid instead of CSS Flexbox

I create this Codepen. It creates 4 square buttons that, when container size become small, the last two buttons are placed on a new line. It uses Flexbox and :after. Is there a way to use CSS grid ...
0
votes
1answer
31 views

Adding margins to the right edge of Flex-Start React-Native

import React, { Component } from 'react'; import { StyleSheet, Dimensions } from 'react-native'; import { CheckBox, Container, Content, Text, View, Button, } from 'native-base'; import Fonts from '.....
0
votes
0answers
33 views

Setting overflow to scroll won't work on mobile for flex layout

Scrolling works just fine on desktop but doesn't scroll on mobile. You can see the problem in action here - https://www.shortylove.com/products/amuse. I'm using a CSS flex layout for the product ...
-1
votes
1answer
25 views

How to vertically align text inside flexbox [duplicate]

I'm creating portfolio and have a links as buttons done as flexbox so that responsivity is done easier. Also height of these flexboxes is done using JavaScript due to having percentages. I've already ...
0
votes
1answer
43 views

Inner div has height bigger than container [duplicate]

I have a problem of footer being in the middle of my main area. By default it looks like this: <div style={{width: '100%', height: '100%', display: 'flex', flexFlow: 'column nowrap'}}> &...
0
votes
2answers
36 views

flexbox in react : doesn't resize

I am trying to display on screen a green block for 1/4 of the screen and a yellow block for 3/4 of the screen using react.js I have the following code - but green block and yellow block has the same ...
-1
votes
1answer
38 views

Why setting flex display for a table column breaks the table structure?

If the 2nd and 3rd column is set to be a flex element in a 3 columned table then the table structure breaks and the 3rd column slips below the 2nd loosing the table like structure. Why this happens? ...
0
votes
1answer
25 views

Centering Text in a Flex Column when the text wraps?

I have a column with a logo at the top and text below the logo some text in a different container. The css for the flex container is set to flex flex-direction: column align-items: center. When the ...
0
votes
1answer
27 views

How would I get the parent height to increase?

I am creating a document upload system and want to have rows of all the documents that have been uploaded with the last row being the "add another document" row. Currently, the list container with the ...
1
vote
1answer
21 views

How to make a description list aligned by pairs with Flexbox

I am new to flexbox and I have been trying to make a description list aligned in pairs stacked on top of each other like in a table. I have tried some flexbox techniques but nothing is working This ...
4
votes
4answers
57 views

How can I spread out my flex items to more than the width of a container?

I'd like to use flex to create something similar to this with CSS: What I've tried so far is this code: #dot-container { position: absolute; width: 30vw; background: black; height: ...
0
votes
1answer
25 views

Grid inside flex with fixed-width left and right sidebars

I am trying to make following with html and css: Image sketch Basically, I want to accomplish this: Left and Right sidebars have 200px width always and they dont have paddings or margins themselves (...
2
votes
1answer
61 views

How to respect the height of an inner scrollable container to the outer container height?

First off, I tried this simplified in the Browser https://codesandbox.io/s/competent-bassi-yjtoj and it works as expected. In my project I'm using Electron, React and MUI and plain CSS. I do not know ...
0
votes
1answer
33 views

How to force a maximum amount of boxes in a row in flex?

I have 4 total items that I want to display on a page. Two items on top and 2 below. The ones on the bottom dimensions need to be different from the ones on top. I am using flexbox to do this. The ...
0
votes
3answers
46 views

responsive navbar with flexbox

i'm learning to build from scratch a website so i can learn properly how to build a nice website however i start with the navbar but its not responsive even using flexbox , would you like to appoint ...
0
votes
1answer
26 views

Unable to set correct column width in Vuetify

I am attempting to replicate this page layout with Vuetify but what I am getting is this Here is the code <Section> <div slot="contents"> <v-form ref="form"> ...
0
votes
0answers
27 views

How do I set CSS3 flex-basis property using Bootstrap Flex?

Using CSS3 I can individually set the flex properties like so .someclass { flex-grow: 1; flex-shrink: 1; flex-basis: auto; } Using Bootstrap (version >= 4.1) flex it seems I can only ...
0
votes
1answer
29 views

CSS Grid layout for a form

I have a div named main-filter and within the div, I have two div. Now, I want to create a form with button, labels and input and I want to put two div inside the form and it should look like the ...
1
vote
5answers
59 views

Aligning flex items vertically

I am making cards using flexbox(https://jsfiddle.net/vs37qo0r/): /* Only included flex related styles*/ .container { display: flex; flex-direction: row; /*default*/ align-items: ...
0
votes
1answer
31 views

How to prevent images in a flex-box from moving following one another according to their size each time?

I am updating 2 images by click, each one probably has a different size and ratio every time. When one of them changes, the other one follows. I have them far enough from each other, so they do not ...
0
votes
2answers
31 views

justified nested button group in bootstrap 4

I am having a Button group control like this. <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/> <link href="https://cdnjs....
0
votes
1answer
40 views

How to align two divs of same height and third div in next line

I need to display an image(left-side) in one column and display a button(on Right side column) and description in second column(on right side column). i got the result as expected, but in mobile view, ...
2
votes
3answers
68 views

CSS Flexbox: align flex item with different width

I'm trying to align some flex items with different widths. I can not hit some elements. https://jsfiddle.net/sistel/m1vu9exf/2/ I cannot align the texts and colored squares as shown in this figure ...
4
votes
2answers
82 views

Create responsive layout with 4 square buttons

I would like to create a layout like this one: The black border indicates the width of the window (or the container). The pink squares are simple divs that I will then treat as buttons. They always ...
0
votes
4answers
50 views

Flexbox - first column full height [duplicate]

How can I make the first .item (green box) 100% height ? * { box-sizing: border-box; } .wrap { display: flex; flex-wrap: wrap; } .item { border: 1px solid red; background: #8282e0; ...
0
votes
1answer
33 views

How can I place these images into 2 rows of 4 pictures each using flexbox

I have 8 pictures which I want to place into 2 rows of 4 pictures each using flex-box. How would I do this? I've tried using flex-wrap but that made it so on the first row there were 5 images and on ...
-2
votes
0answers
31 views

CSS Flexbox 2 container, the left column is responsive to the width of the right column

I have 2 containers, for example: ex. 200px ex. 200px | Container 1 | | Container 2 | if Container 2 adjusts its width depending on its contents, the Container 1 adjusts its ...
0
votes
1answer
40 views

Cross-browser image height issue with flexbox inside CSS grid

I have a wrapping container set to display:grid that contains two columns. One column contains a responsive image, the other contains text. The image column is set to display:flex so that the image ...