CODEWITHSUNDEEP
htmlcssflexbox
Konrad
Konrad

Reputation: 63

Flexbox Text wrapping

I have the following layout:

.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>

I would like my text to wrap inside the div .text1 and .text2 without disturbing the flexgrow. In other words, is there any way to force flexbox to stay at the same size no matter the text in it?

I'm using Chrome. Codepen link: https://codepen.io/Konrad29/pen/Oxbmqx

Upvotes: 4

Views: 5771

Answers (1)

Asons
Asons

Reputation: 87191

By setting the flex-basis to 0, you control the width (distribute the space) with flex-grow

Update these rules

.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  */
}

This will make the text1 to take 1/3 of the available space and the text2 2/3.

Based on what content you will put in each text1/2, you might also need to set min-width, which defaults to auto, to 0 to allow it the be smaller than its content

Updated codepen

Stack snippet

.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>

Upvotes: 3

Related Questions