Flexbox problem

1

I want to ask something . I’ve a simple flexible layout with two child elements (say child-1 and child-2 with some fixed height(say 100px ) . When I’m giving both of child elements flex-basis: 50% , it’s working fine so far . I checked width of both elements in dev tool , and it was exactly equal. But problem arises here when I am adding some text in one of the child element (let’s say I am adding text ‘Lorem Ipsum’ to child-1 element, the height of child-1 increases slightly . Now if I test width of both childs using dev tool , it’s not exactly same anymore (there is a slight difference between width ). It’s not actually creating any big problem . But I am curious , why this is happening ?

here is my code so far

<html>
<body>
  <div class="parent">
    <div class="child-1"></div>
    <div class="child-2"></div>
  </div>
</body>

</html>
<style>
.parent{
  display: flex;
}
.child-1,.child-2{
  height: 100px;
  flex-basis: 50%;
}
</style>
2

Can you show a live example, I don’t see that behavior with the code you posted. I’m also not sure how the div would increase in height if you have given it a fixed height?

You can try messing with the grow/shrink properties.

3

hmm Ok … First of all thanks for your reply .
I want you copy that code and paste in your code editor (in vs code or whatever you wish). And then run in chrome . Then open your dev tool and check width of both children…it will be exactly same .

And then and some text in child-1( say Lorem Ipsum ) , then again check the width of both children using dev tool , you’ll see it’s not exactly same anymore , there is slight difference between width.

4

i managed to get the problem you described only when i had word so long, it would not fit in container, then , since it’s flexbox it just grows in size. If you specify container width:50%; then they both stay the same since they(child cotnainers) are no longer using flex properties. But then you would need to handle text overflow. here’s a codepen recreation in my understanding

1 Like
5

Flex basis just says “this should be the ideal starting size”. It does not say “this is what the width should be”, that’s why it’s a seperate property. Re the height, the container will expand as you add content – this is the aim of flex. To fix height/width you need to use height/width, as @andrisLaduzans says. But it’s most often preferable (not always) to rely on flex grow/shrink and the justify/align properties and avoid explicitly specifying height/width.

1 Like
6

how do you study flex? me I am very slow paced I need to learn and grasp each section of the page challenge what I did is I practice it in separate with vs code and use liveserver so it will automatically update but since I’m slow I do the section one at a time any suggestion how you understand things easy

7

some explanations are not complete so I need to go to youtube and watch explanations

8

I really say flexbox is cool to learn I love it

9

Just…do projects? think of site or a page you want to make or copy something and try to recreate it. Watching youtube for hours wont help you. You need to practice. Good start is these basic ‘template sites’ like html5up.net …just grab a pen and paper. draw out the layout on sheet of paper, then try to recreate it on our own…