能否实现CSS父容器适配子元素1，子元素2适配父容器？

这个布局在CSS里完全可以实现，核心是让父容器的宽度由固定尺寸的子元素1决定，同时限制子元素2的宽度不超过父容器。

CSS 修改方案 #

针对你提供的代码，只需对父容器和子元素2做两处关键调整：

1. 给父容器添加 align-self: flex-start，避免外部flex容器将其拉伸至满宽，确保父容器宽度由子元素1的固定尺寸决定
2. 给子元素2设置 width: 100% 继承父容器宽度，同时添加 word-break: break-word 让长文本自动换行不溢出

修改后的完整CSS代码：

.outerContainer {
  background-color: #ff0;
  display: flex;
}
.container {
  background-color: #f00;
  display: flex;
  flex-direction: column;
  align-self: flex-start; /* 关键：父容器宽度由内部内容决定 */
}
.elem1 {
  width: 150px;
  height: 150px;
  background-color: #0f0;
}
.elem2 {
  height: 100px;
  background-color: #00f;
  width: 100%; /* 关键：宽度适配父容器 */
  word-break: break-word; /* 长文本换行处理 */
}

对应修正类名统一后的HTML：

<div class="outerContainer">
  <div class="container">
    <div class="elem1">
      Fixed size elem 1
    </div>
    <div class="elem2">
          Elem 2 Please keep inside the bounds of the container.
    </div>
  </div>
</div>

原理说明 #

• align-self: flex-start：由于外部容器是flex布局，默认子元素会被拉伸至占满可用宽度，这个属性让红色父容器仅占据自身内容所需的宽度（即绿色子元素的150px）
• width: 100% + word-break: break-word：让蓝色子元素完全继承父容器宽度，同时确保长文本在父容器边界内自动换行，不会溢出

React Native 适配实现 #

在React Native中，思路与CSS完全一致，代码示例如下：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.outerContainer}>
      <View style={styles.container}>
        <View style={styles.elem1}>
          <Text>Fixed size elem 1</Text>
        </View>
        <View style={styles.elem2}>
          <Text style={styles.elem2Text}>Elem 2 Please keep inside the bounds of the container.</Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  outerContainer: {
    backgroundColor: '#ff0',
    flexDirection: 'row',
  },
  container: {
    backgroundColor: '#f00',
    flexDirection: 'column',
    alignSelf: 'flex-start',
  },
  elem1: {
    width: 150,
    height: 150,
    backgroundColor: '#0f0',
    justifyContent: 'center',
    alignItems: 'center',
  },
  elem2: {
    height: 100,
    backgroundColor: '#00f',
    width: '100%',
    justifyContent: 'center',
    padding: 8,
  },
  elem2Text: {
    flexWrap: 'wrap',
    color: '#fff',
  },
});

内容的提问来源于stack exchange，提问作者sune