hebrerillo
Coder
Hello there!
I need help! Why is the input growing so much that it overflows the flex container?
However, if you comment the input and remove the comment on the '.div-grow' element, this one respects the flexbox layout.
In fact, if the 'flex-grow:1' is removed form the input, it still grows so much.
Thank you!!
I need help! Why is the input growing so much that it overflows the flex container?
However, if you comment the input and remove the comment on the '.div-grow' element, this one respects the flexbox layout.
In fact, if the 'flex-grow:1' is removed form the input, it still grows so much.
Code:
<html>
<head>
<style>
.flex-container {
width: 400px;
height: 200px;
border: 1px solid black;
display: flex;
align-items: start;
}
.input-grow, .div-grow {
flex-grow: 1;
border: 1px solid red;
font-size: 29px;
}
.div-no-grow {
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="flex-container">
<input class="input-grow" type="text" placeholder="Type text..." />
<!--<div class="div-grow">I grow</div>-->
<div class="div-no-grow">I do not grow</div>
</div>
</body>
</html>
Thank you!!