Below is a complete HTML file that mimics a minimalist version of the Google Translate interface. Notice that both the input and output areas are contained in a parent layout that lets them grow naturally. When either box’s content exceeds the viewport height, only the browser’s (single) vertical scrollbar appears, rather than each area having its own scrollbar.
You can copy this code into a file (e.g., index.html) and open it in your browser:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google Translate Clone</title>
<style>
/* Reset default spacing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Ensure the viewport and body take full height */
html, body {
height: 100%;
overflow-y: auto; /* Let the entire page scroll if needed */
font-family: Arial, sans-serif;
background-color: #f1f3f4; /* Light background similar to Google */
}
/* Main container that holds the header and translator panels */
.container {
min-height: 100%;
display: flex;
flex-direction: column;
}
/* A header bar styled in Google's blue */
.header {
background-color: #4285F4;
color: white;
padding: 20px;
text-align: center;
font-size: 24px;
}
/* The translator panel: a flex container to lay out the two main boxes side by side */
.translator {
flex: 1;
display: flex;
flex-direction: row;
gap: 20px;
padding: 20px;
}
/* Shared styling for both input and output areas */
.box {
flex: 1;
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
background-color: white;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
/* Notice: no fixed height and no overflow settings here --
the boxes expand naturally as content increases. */
}
/* Make the input area look editable */
.input-box {
outline: none;
}
/* Using contenteditable’s pseudo-element to simulate placeholder text */
.input-box:empty:before {
content: "Enter text...";
color: #aaa;
}
/* Output box styling (you might later swap this out for a dynamic translation display) */
.output-box {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="container">
<div class="header">Google Translate</div>
<div class="translator">
<!-- Input area: a contenteditable div that behaves like a textarea -->
<div class="box input-box" contenteditable="true">
<!-- Users type here -->
</div>
<!-- Output area: a regular div to display translation results -->
<div class="box output-box">
Translated text will appear here.
</div>
</div>
</div>
</body>
</html>
Unified Scrolling with a Flexible Container:
The <html> and <body> elements are set to height: 100% to ensure the page always occupies the full viewport.
We do not limit the height of the input (.input-box) or output (.output-box) areas.
This means when the user enters a lot of text, the boxes simply expand. The browser’s main scrollbar (associated with the <body>) becomes active once content exceeds the viewport. That way, you only ever have one vertical scrollbar controlling the entire page.
Flexbox Layout for Side-by-Side Panels:
The .translator container uses display: flex; with a flex-direction: row to display both the input and output areas side by side.
The gap and padding add spacing between elements in a clean, modern manner.
Both .box elements have flex: 1, ensuring they take equal available width.
Contenteditable Input Instead of a Fixed Textarea:
Instead of a <textarea>, we use a <div> with contenteditable="true" for the input area. This choice allows the element to grow naturally with its content, with no internal scrollbar.
The pseudo-element :empty:before simulates placeholder text, creating a user-friendly hint.
CSS for a Clean, Modern Look:
The header uses a Google-blue background with white text for a familiar look.
Shadows, borders, and rounded corners give a subtle, refined aesthetic reminiscent of modern web apps.
Responsive Considerations: On smaller screens, you might not want the two panels to sit side by side. By adding a simple media query, you could stack them vertically. For example:
@media (max-width: 600px) {
.translator {
flex-direction: column;
}
}
Dynamic Functionality: In a full application you would likely use JavaScript to handle text input, fetch translations from an API, and update the output box accordingly. This example, however, focuses solely on the HTML/CSS interface.
CSS Clarifications:
The key to creating a unified scrollbar experience is to let content determine its own height rather than constraining each panel with a fixed height and using internal scrolling (overflow-y: auto on the individual boxes). By allowing natural expansion, the page scales and only the browser’s scrollbar is used.
I hope this detailed explanation clears up your CSS confusion while also giving you a clean example to start with. Would you like to dive deeper into any additional aspects—perhaps dynamic resizing or responsive design adjustments?