flexbox

AntDesign TabPane min-height 100%

由 ▼魔方 西西 提交于 2020-12-06 06:35:08
问题 Using Ant.Design Tabs https://ant.design/components/tabs/ How can I set styling on TabPane so that it's min-height is always 100% height of the window even when it's empty? Below example should cover the window with color #F5F5F5 回答1: This has worked for me. <TabPane tab={tab.title} key={index}> <Row> <Col style={{minHeight: "100vh", maxheight: "100vh"}}> Test </Col> </Row> </TabPane> 回答2: So this has worked for me too <Tabs onChange={() => { console.log("oi"); }} type="card" style={{

Prefer shrinking over growing in a flex container with flex-flow: row wrap

由 蹲街弑〆低调 提交于 2020-12-05 02:45:14
问题 Displaying an image gallery of different sized images and ratio with the following specs: No blanks (margins) between images. Respecting the original ratio as much as possible. Images surrounded by a link. Non-JS solution. Images could be cropped a bit. Portable solution. Set of images displayed is random. Images must be displayed from left to right (prevents using columns). I achieved that with the following flexbox solution: section { display: flex; flex-flow: row wrap; justify-content:

Flex: 100% height wrapper div doesn't work

由 放肆的年华 提交于 2020-11-29 19:20:18
问题 I have two four elements: html , body , root-wrapper (blue border) and wrapper (red border). The red wrapper needs to be inside the blue root wrapper, however, when there is a lot of text on the page, the red inner wrapper goes beyond the blue one, like this: While it should be the blue one that expands. JSFiddle: https://jsfiddle.net/ase71y34/ I tried settings height: 100% and flex: 1 1 auto on the root-wrapper , but it didn't work. html : ... <body> <div class="root-wrapper"> <div class=

Flex: 100% height wrapper div doesn't work

由 余生长醉 提交于 2020-11-29 19:17:24
问题 I have two four elements: html , body , root-wrapper (blue border) and wrapper (red border). The red wrapper needs to be inside the blue root wrapper, however, when there is a lot of text on the page, the red inner wrapper goes beyond the blue one, like this: While it should be the blue one that expands. JSFiddle: https://jsfiddle.net/ase71y34/ I tried settings height: 100% and flex: 1 1 auto on the root-wrapper , but it didn't work. html : ... <body> <div class="root-wrapper"> <div class=

Flex: 100% height wrapper div doesn't work

由 倾然丶 夕夏残阳落幕 提交于 2020-11-29 19:15:24
问题 I have two four elements: html , body , root-wrapper (blue border) and wrapper (red border). The red wrapper needs to be inside the blue root wrapper, however, when there is a lot of text on the page, the red inner wrapper goes beyond the blue one, like this: While it should be the blue one that expands. JSFiddle: https://jsfiddle.net/ase71y34/ I tried settings height: 100% and flex: 1 1 auto on the root-wrapper , but it didn't work. html : ... <body> <div class="root-wrapper"> <div class=

Flex: 100% height wrapper div doesn't work

由 泄露秘密 提交于 2020-11-29 19:14:03
问题 I have two four elements: html , body , root-wrapper (blue border) and wrapper (red border). The red wrapper needs to be inside the blue root wrapper, however, when there is a lot of text on the page, the red inner wrapper goes beyond the blue one, like this: While it should be the blue one that expands. JSFiddle: https://jsfiddle.net/ase71y34/ I tried settings height: 100% and flex: 1 1 auto on the root-wrapper , but it didn't work. html : ... <body> <div class="root-wrapper"> <div class=

Flex: 100% height wrapper div doesn't work

由 偶尔善良 提交于 2020-11-29 19:12:14
问题 I have two four elements: html , body , root-wrapper (blue border) and wrapper (red border). The red wrapper needs to be inside the blue root wrapper, however, when there is a lot of text on the page, the red inner wrapper goes beyond the blue one, like this: While it should be the blue one that expands. JSFiddle: https://jsfiddle.net/ase71y34/ I tried settings height: 100% and flex: 1 1 auto on the root-wrapper , but it didn't work. html : ... <body> <div class="root-wrapper"> <div class=

Flex: 100% height wrapper div doesn't work

由 喜欢而已 提交于 2020-11-29 19:10:42
问题 I have two four elements: html , body , root-wrapper (blue border) and wrapper (red border). The red wrapper needs to be inside the blue root wrapper, however, when there is a lot of text on the page, the red inner wrapper goes beyond the blue one, like this: While it should be the blue one that expands. JSFiddle: https://jsfiddle.net/ase71y34/ I tried settings height: 100% and flex: 1 1 auto on the root-wrapper , but it didn't work. html : ... <body> <div class="root-wrapper"> <div class=
订阅 flexbox