Reputation: 4033
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>
Upvotes: 3
Views: 728
Reputation: 286
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;
}
Upvotes: 2