I've been working on developing a straightforward code editor application, but I ran into an issue with the design. The text area appears slightly taller than its container.
This is the structure of index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body class="page">
<div class="files">
</div>
<div class="container">
<div class="lines">
</div>
<div class="editor">
<textarea></textarea>
</div>
</div>
</body>
</html>
This is the CSS stylesheet for index.css:
.lines {
height: 100%;
background-color: black;
flex: 1;
display: flex;
flex-direction: column;
background-color: #34495e;
}
.editor {
height: 100%;
flex: 20;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.page {
height: 80vh;
margin: 0;
padding: 0;
}
textarea {
width: 100%;
height: 100%;
resize: none;
border: none;
outline: none;
background-color: #2c3e50;
}
.files {
height: 30px;
width: 100%; display: flex; flex-direction: row;
}
.file {
} .lines { height: 100%; background-color: black; flex: 1; display: flex; flex-direction: column; background-color: #34495e;
.editor { height: 100%; flex: 20; } .container { width: 100%; height: 100%; display: flex; flex-direction: row;
flex-wrap: nowrap; } .page { height: 80vh; margin: 0; padding: 0; } textarea { width: 100%; height: 100%; resize:
none; border: none; outline: none; background-color: #2c3e50; } .files { height: 30px; width: 100%; display: flex;
flex-direction: row; } .file { } <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body class="page">
<div class="files">
</div>
<div class="container">
<div class="lines">
</div>
<div class="editor">
<textarea></textarea>
</div>
</div>
</body>
</html>I've tried various solutions to address this issue without success. I researched on Stack Overflow, suspecting that it could be related to properties like resize, border, and outline, but they don't seem to be causing the problem.