Comments (5)
That is a silly way of formulating the question, I think I just wanted to check if by any chance you know or you have any idea about it, certainly uing auto by default makes more sense, however there is something in the combination of layouts that is causing issues, Im isolating an example at the moment trying to reproduce it, will update here.
from react-flexbox-layout.
I'm not sure why I went with flex-basis: 0
earlier. It might have been so
that the flex child wouldn't cause the parent to expand if the child had
wide content. But if that's the case, having flex-shrink: 1
should help
On Tue, Jun 21, 2016 at 2:04 PM Rafael [email protected] wrote:
That is a silly way of formulating the question, I think I just wanted to
check if by any chance you know or you have any idea about it, certainly
uing auto by default makes more sense, however there is something in the
combination of layouts that is causing issues, Im isolating an example at
the moment trying to reproduce it, will update here.—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#24 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/ABXjcQh2F3zO-APKJOP5CPV9a1nzFGHEks5qOFH1gaJpZM4I6UPN
.
from react-flexbox-layout.
Hey, well this case is driving me crazy so far is a weird bug with how IE11 calculates the width for the scenario of using align="stretch" on a HLayoutItem, either way, does not seem like something the library should tackle, at least not from my understanding so far.
I know I should remember this but I don't :( hehe can we add 'technical' explanation of why immediate children of a HLayoutItem align="stretch" are turned into 'flex items' with value 1 1 auto
. Since we keep getting confused by this and I keep forgetting the conceptual and rational of this.
I can add a 'technical' section to the README if it makes sense for some rationales like this.
Thanks!!
from react-flexbox-layout.
So stretch
is tricky. There are two cases to consider
- The
LayoutItem
is the largest item inLayout
, so it renders as it normally would - The
LayoutItem
is not the largest item inLayout
, so it stretches to match the size of the container
We have this non-ideal situation where we can't inject props
onto children elements.
e.g. given this code:
<HLayoutItem align="stretch">
<div>this div should be stretched</div>
</HLayoutItem>
the ideal output would be
<div style="align-self: stretch">this div should be stretched</div>
but since we can't trust the child component to pass along the style
prop, we end up doing this:
<div class="growChild" style="align-self: stretch"> // HLayoutItem
<div>this div should be stretched</div>
</div>
and we need the CSS rule for growChild
to satisfy the two cases listed above.
Does that make sense?
from react-flexbox-layout.
Brilliant! thanks very much, we could probably add this very same explanation to the README? under a 'technical' section.
from react-flexbox-layout.
Related Issues (13)
- Support for server side rendering HOT 5
- Warn the user when setting styles through class name on things that should not be changed HOT 1
- Make the update engine listen to resize based on registrations HOT 3
- Please update lodash to 4.x HOT 1
- Flex item and min-width 0 HOT 3
- IE 10 & 11 flex basis incompatability HOT 5
- Assumptions: box-sizing: border-box in the README HOT 2
- Does lodash really need to be a peer dependency? HOT 4
- Any reason for not being compatible with React 15.1.x? HOT 3
- React 15.3.0 support
- Is lodash really being eager loaded? HOT 2
- Add support for react 0.14-rc1 :) HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-flexbox-layout.