Languages

Flexbox - how to set 100% height of each child inside component?

6 points
Asked by:
Wesley
201

I would like to fill container with children that have equal height and they are on the grid.

I have code:

// ONLINE-RUNNER:browser;

<html>
<head>
    <style>

        div {
            border: 1px solid red;
        }

        div.container {
            display: flex;
            flex-wrap: wrap;
            height: 100%; /* this causes vertical scrollbar to appear */
        }

        div.child {
            flex: 40%; /* <- how to remove 40% and use some other flex 
            param to achieve the same result? */  
            
            margin: 10px;
            padding: 10px;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
</div>
</body>
</html>

Result:

 Questions:

1. How to remove vertical scrollbar? I don't want to set height to 99% :)

2. flex: 40% - How to remove flex: 40% and use some other flex param to achieve the same result?

2 answers
5 points
Answered by:
Wesley
201

Grid box cound solve your problem too. 

  1. How to remove vertical scrollbar? I don't want to set height to 99% :)
    Ad. use correwct box model sizing: box-sizing: border-box; current approach
  2. flex: 40% - How to remove flex: 40% and use some other flex param to achieve the same result?
    Ad. That approach is good in your case, sometimes some programmers use calc() function too.

Example solution:

// ONLINE-RUNNER:browser;

<html>
<head>
  <style>

	body {
		margin: 0;
      	height: 300px;
	}

	div {
		border: 1px solid red;
		box-sizing: border-box;
	}

	div.container {
		height: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	div.child {
		margin: 10px;
		padding: 10px;
		flex: 40%; /* <-- helps to keep 2 child per row */  
	}

  </style>
</head>
<body>
  <div class="container">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
  </div>
</body>
</html>
0 comments Add comment
5 points
Answered by:
Wesley
201

Answers:

1. How to remove vertical scrollbar? I don't want to set height to 99% :)

Answer: add body with margin: -1px and overflow: hidden

2. flex: 40% - How to remove flex: 40% and use some other flex param to achieve the same result?

Answer: that is correct solution.

Solution:

// ONLINE-RUNNER:browser;

<html>
<head>
    <style>

        body {
            margin: 0;
          	height: 300px;
            overflow: hidden;
        }

        div {
            border: 1px solid red;
        }

        div.container {
            display: flex;
            flex-wrap: wrap;
            height: 100%; /* it is ok, take a look at body */
        }

        div.child {
            flex: 40%; /* it is ok */
            margin: 10px;
            padding: 10px;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
</div>
</body>
</html>

 

0 comments Add comment
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join