Skip to content Skip to sidebar Skip to footer
Home / Css / Flexbox / Html

How To Prevent Flexbox From Flexing Vertically?

Post a Comment
So I have the following in my page: and they're basically two divs side by side coloured blue and orange which is made by making the outer container a flexbox. What i want to do n

Solution 1:

As I already wrote in the commentary, you can use javascript. If I understand correctly, then in the code I get the height in pixels for the current screen size, provided that the height is set to 90vh. Further, the blocks (#box1, #box2) are assigned this height.

I don’t know, why you didn’t assign a height of 90vh to the #container div. And instead they assigned each block separately. Perhaps you need it more. And according to your css, I made the code in javascript.

window.onload = function() {
let box1 = document.querySelector('#box1');
let box2 = document.querySelector('#box2');
  
  box1.style.height = box1.offsetHeight + 'px';
  box2.style.height = box2.offsetHeight + 'px';
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
    font-size: 1vw;
}

body {
    height: 100%;
}

#container {
    display: flex;
    width: 100%;
}

#box1 {
    border: 1px solid black;
    width: 50%;
    height: 90vh;
    background: lightblue;
}

#box2 {
    border: 1px solid black;
    width: 50%;
    height: 90vh;
    background: orange;
}
<!DOCTYPE html>
<html lang="en">  
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href = "style.css">
  <title>Document</title>
</head>
<body>
  <div id = "container">
    <div id = "box1"></div>
    <div id = "box2"></div>
  </div>
</body>
</html>

Solution 2:

Wouldn't you just set the height of #container to a certain px or max-height or % so it doesn't exceed that number in height?


Post a Comment for "How To Prevent Flexbox From Flexing Vertically?"