Adjusting the height of a flexbox column to fit three rows within the space of two

Question

Adjusting the height of a flexbox column to fit three rows within the space of two

Exploring the wonders of Flexbox and delving into its functionality. I have shared a Code Sandbox link showcasing my React /bootstrap code in progress... Currently, I am developing a clock component with two buttons for adjusting time (increase/decrease). Visual representation can be found below:

https://i.sstatic.net/TtMlW.png

The height of this component suits me perfectly at this stage. However, I wish to incorporate three rows of buttons (Start, Pause, 1st) in a separate column adjacent to the clock. My aim is to make this second column adjust its height according to the clock's height on the left. Unfortunately, my current output differs from my expectations as shown here:

https://i.sstatic.net/jWNYs.png

I've experimented with utilizing two flexboxes but struggle with aligning their heights accordingly. How can I effectively achieve this synchronization between columns?

javascript css reactjs twitter-bootstrap flexbox

Answer 1

Answer №1

Utilizing the power of flexbox, accomplishing this task becomes a breeze.

In the code snippet below, you can observe that I have successfully replicated your specifications.

However, the buttons positioned above and below are currently spaced out to align with the three buttons on the right side.

If your intention is to occupy the entire space with the two buttons, you can adjust their padding to match the column of three buttons.

* {
  box-sizing: border-box;
}

.wrapper,
.clock-wrapper,
.action-wrapper,
.btn-wrapper {
  display: flex;
}

.btn-wrapper button {
  padding: 5px 10px;
}

.action-wrapper,
.btn-wrapper {
  flex-direction: column;
  justify-content: space-between;
}

input {
  height: 100%;
  font-size: 30px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}

<div class="wrapper">
  <section class="clock-wrapper">
    <div class="btn-wrapper">
      <button>Up</button>
      <button>Down</button>
    </div>
    <div>
      <input type="text" value="10:35" />
    </div>
    <div class="btn-wrapper">
      <button>Up</button>
      <button>Down</button>
    </div>
  </section>
  <section class="action-wrapper">
    <button>Start</button>
    <button>Reset</button>
    <button>1st</button>
  </section>
</div>

Answer 2

Utilizing the power of flexbox, accomplishing this task becomes a breeze.

In the code snippet below, you can observe that I have successfully replicated your specifications.

However, the buttons positioned above and below are currently spaced out to align with the three buttons on the right side.

If your intention is to occupy the entire space with the two buttons, you can adjust their padding to match the column of three buttons.

* {
  box-sizing: border-box;
}

.wrapper,
.clock-wrapper,
.action-wrapper,
.btn-wrapper {
  display: flex;
}

.btn-wrapper button {
  padding: 5px 10px;
}

.action-wrapper,
.btn-wrapper {
  flex-direction: column;
  justify-content: space-between;
}

input {
  height: 100%;
  font-size: 30px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}

<div class="wrapper">
  <section class="clock-wrapper">
    <div class="btn-wrapper">
      <button>Up</button>
      <button>Down</button>
    </div>
    <div>
      <input type="text" value="10:35" />
    </div>
    <div class="btn-wrapper">
      <button>Up</button>
      <button>Down</button>
    </div>
  </section>
  <section class="action-wrapper">
    <button>Start</button>
    <button>Reset</button>
    <button>1st</button>
  </section>
</div>

Answer 3

Answer №2

.button-group button {
  height:50%
}

To align the up and down buttons with the clock height, include this code.

The class 'button-group' sets the height using flexbox, which is correct, but the buttons should also have a height that matches the 'button-group' container.

Answer 4

.button-group button {
  height:50%
}

To align the up and down buttons with the clock height, include this code.

The class 'button-group' sets the height using flexbox, which is correct, but the buttons should also have a height that matches the 'button-group' container.

Adjusting the height of a flexbox column to fit three rows within the space of two

Answer №1

Answer №2

Similar questions

Understanding and aggregating data from JSON files

Custom CSS file for individual tenants in the Twig main template

Switching off toggle does not switch back to primary theme when clicking again for the second time

JavaScript: Obtaining the month based on the week number and year

Implementing an Onclick function in HTML

Updating React JSX class based on certain conditions without manipulating the actual DOM

Converting JavaScript variable values to PHP variables by extracting the content of a textarea

Create a path on the Google Map that follows the designated route

Methods for setting the value of a scope variable within a controller's function

How do I make the YouTube Grid Gallery player show up in a pop-up window?

Utilizing JavaScript and jQuery libraries in conjunction with periods

The useRef value is not defined when used inside the useEffect function

Attempting to replicate the flipping motion of a card by applying the transform property to rotate a div element, ultimately revealing a different

Vue and Jexcel: maximizing efficiency with event handling and dynamic calculations

Is it possible to implement a Cross-Domain iframe Resizer in NextJS?

Tips for implementing dynamic image paths in Next.js

Customize your Material UI theme colors with SASS variables

Retrieving information from the API to populate a child component in Next.js

Restrict the number of labels on Chart.js exclusively for smaller displays

It is not possible to decrease the size of the image that is currently used as the background image