Flexbox fit width of children

user_11397070 0
Viewed 134

I have the following flexbox. How can I make this flexbox fit the amount of children? The first snippet with 3 children is fine. But in case there's only one child, I want the flexbox to reduce its size to the width of the child + padding. In other words, I don't want the whitespace and background on the right side when there's only one child (see second snippet, child shall keep the size).

.wrapper {
  display: flex;
  flex-wrap: wrap;
  padding-right: 10vw;
  padding-bottom: 10vw;
  height: 100%;
  max-width: 80%;
  background-color: #F8F8F8;
}

.wrapper div {
   flex: 1;    
   min-width: 50%;
   margin-top: 10vw;
   padding-left: 10vw;
   box-sizing: border-box;
   flex-grow: 0;
}
<div class="wrapper">

  <div>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua
  </div>
  
  <div>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua
  </div>
  
  <div>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua
  </div>
  
</div>

.wrapper {
  display: flex;
  flex-wrap: wrap;
  padding-right: 10vw;
  padding-bottom: 10vw;
  height: 100%;
  max-width: 80%;
  background-color: #F8F8F8;
}

.wrapper div {
   flex: 1;    
   min-width: 50%;
   margin-top: 10vw;
   padding-left: 10vw;
   box-sizing: border-box;
   flex-grow: 0;
}
<div class="wrapper">

  <div>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua
  </div>
  
</div>

flexbox css html
1 Answers

The only solution to your problem that given the background-color to the text div. Otherwise, it won't work. Also when you give padding with ** vw ** it makes wrapper couldn't work well. So I suggest you put the text in a div and make some changes in the parent div of the texts. Here what I've done.

    <div class="wrapper">
      <div class="text-box">
        <div class="text">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua
        </div>
      </div>
      <div class="text-box">
        <div class="text">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua
        </div>
      </div>
      <div class="text-box">
        <div class="text">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua
        </div>
      </div>
    </div>

.wrapper {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding: 80px;
      height: 100%;
      width: inherit;
    }

    .wrapper .text-box {
      flex: 1;
      flex-basis: 50%;
      min-width: 50%;
      padding: 80px;
      margin: 0;
      box-sizing: border-box;
      flex-grow: 0;
      background-color: #f8f8f8;
    }
user_153474940
Related