html - Flexbox 文本环绕

Question

我有以下布局:

.main {
  height: 200px;
  width: 300px;
  border: 1px solid black;
  background-color: rgba(255, 46, 0, 0.5);
}

.container {
  height: 200px;
  width: 200px;
  margin: auto;
  border: 1px solid black;
  z-index: 2;
  background-color: white;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.text1 {
  border: 1px solid red;
  flex-wrap: nowrap;
  flex-grow: 1;
}

.text2 {
  border: 1px solid blue;
  flex-wrap: nowrap;
  flex-grow: 2;
}

<div class="main">
  <div class="container">
    <div class="text1">Lorem impsum pimpsum</div>
    <div class="text2">Tex2</div>
  </div>
</div>

我希望我的文本包装在 div .text1 和 .text2 中而不干扰 flexgrow .换句话说，有什么方法可以强制 flexbox 保持相同的大小，而不管其中的文本如何？

我正在使用 Chrome。代码笔链接:https://codepen.io/Konrad29/pen/Oxbmqx

Answer 1

通过将 flex-basis 设置为 0，您可以使用 flex-grow 控制宽度(分配空间)

更新这些规则

.text1{
  border: 1px solid red;  
  flex-wrap:nowrap;
  flex:1 1 0;                      /*  updated  */
  min-width: 0;                    /*  might be needed as well  */
}
.text2{
  border: 1px solid blue;
  flex-wrap:nowrap;
  flex:2 2 0;                      /*  updated  */
  min-width: 0;                    /*  might be needed as well  */
}

这将使 text1 占用可用空间的 1/3，text2 占用 2/3。

根据您要在每个 text1/2 中放入的内容，您可能还需要设置 min-width，默认为 auto, 到 0 以允许它小于它的内容

Updated codepen

堆栈片段

.main{
  height: 200px;
  width: 300px;
  border: 1px solid black;
  background-color :rgba(255, 46, 0, 0.5);
}
.container{
  height: 200px;
  width: 200px;
  margin: auto;
  border: 1px solid black;
  z-index:2;
  background-color: white;  
  display: flex;
  align-items: stretch;
  justify-content:center;
}
.text1{
  border: 1px solid red;  
  flex-wrap:nowrap;
  flex:1 1 0;
}
.text2{
  border: 1px solid blue;
  flex-wrap:nowrap;
  flex:2 2 0;
}

<div class="main">
  <div class="container">
    <div class="text1">Lorem impsum pimpsum</div>
    <div class="text2">Tex2</div>
  </div>
</div>