是否可以？ - CSS - Parent 适应 child1 而 child2 适应 parent答案

【问题标题】：Is it possible ? - CSS - Parent adapts to child1 while child2 adapts to parent是否可以？ - CSS - Parent 适应 child1 而 child2 适应 parent
【发布时间】：2023-02-09 17:48:20
【问题描述】：

我怀疑这在概念上是否不可能用 css 实现。

我有一个父母（红色）和两个孩子（绿色和蓝色）。孩子 1 有一个固定的大小，我希望父母适应这一点。子项 2 包含一个长文本，但我希望它的宽度适应父项。

是否可以通过这种方式让parent在控制/约束child 2的同时被child 1控制/约束？

这在概念上完全可能吗？

我需要 React Native 项目中的解决方案，它的行为与在 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

【问题讨论】：

只是为了确保：您希望红色容器是至少和绿色孩子一样高，但是如果蓝色孩子内容多了，你想让红色容器垂直增长？

标签： css react-native flexbox

【解决方案1】：

是的，可以使用 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 以确保溢出容器的任何文本都可以滚动。

【讨论】：

【解决方案2】：

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

【讨论】：