React Native 这是可能的吗？- CSS -父级适应子级1，而子级2适应父级

y0u0uwnf 于 2023-02-09 发布在 React

关注(0)|答案(2)|浏览(135)

我怀疑这在概念上是否不可能用css实现。
我有一个父对象（红色）和两个子对象（绿色和蓝色）。子对象1具有固定大小，我希望父对象适应此大小。子对象2包含一个长文本，但我希望其宽度适应父对象。
是否可以通过这种方式让父对象受子对象1的控制/约束，同时控制/约束子对象2？
这在概念上是可能的吗？
我需要一个react原生项目中的解决方案，它的行为与css完全相同，但我将我的问题表述为CSS问题，因为我认为问题和解决方案与CSS有关。

.outerContainer {
  background-color: #ff0;
  display: flex;
}
.container {
  background-color: #f00;
  display: flex;
  flex-direction:column;
}
.elem1 {
  width: 150px;
  height: 150px;
  background-color: #0f0;
}
.elem2 {
  height: 100px;
  background-color: #00f;
}

下面是代码笔的链接：https://codepen.io/breakeren/pen/GRBbgaM?editors=1100

react-native

来源：https://stackoverflow.com/questions/75396206/is-it-possible-css-parent-adapts-to-child1-while-child2-adapts-to-parent

2条答案

按热度按时间

bvn4nwqk1#

是的，使用CSS可以实现这一点。您可以在第一个子容器（绿色）上使用flex-grow属性，在第二个子容器（蓝色）上使用flex-shrink属性。这将确保第一个子容器始终具有固定大小，而第二个子容器将根据父容器的大小进行收缩或增长。下面是一个示例：

.container {
  background-color: #f00;
  display: flex;
  flex-direction: column;
}
.elem1 {
  width: 150px;
  height: 150px;
  background-color: #0f0;
  flex-shrink: 0;
}
.elem2 {
  flex-grow: 1;
  height: 100px;
  background-color: #00f;
  overflow: auto;
}

这将给予父对象（红色）及其子对象（绿色和蓝色）提供所需的行为。注意，我还添加了overflow：auto到第二个子容器（蓝色），以确保溢出容器的任何文本都是可滚动的。

赞(0）回复(0）举报 2023-02-09

kse8i1jr2#

请原谅我不理解你。为什么不固定父框的宽度而不是第一个子框的宽度？

赞(0）回复(0）举报 2023-02-09