Force html element to proportionally adjust to screen width

WannaInternet 0
Viewed 31

I have used flex-shrink on a list button elements arranged horizontally, and placed a span element, which shows the time, at the very right. I noticed that when I begin to shrink the width of the screen the buttons shrink as intended, but the span element disappears. How can I force the span using CSS to proportionally stick to the right side of the screen and re-adjust without any overlap with any of the other button elements?

Here is my code so far- I have used display:flex on most of my other elements:

.startbar {
  display: flex;
  position: fixed;
  height: 25px;
  width: 100%;
  overflow: hidden;
  font-weight: bold!important;
  padding: 2px;
  box-shadow: inset 1px 0 #fff;
  display: block;
  background-color: silver;
  bottom: 0%;
  left: 0;
  right: 0;
  border-top: 1px solid #f4f4f4;
  border-bottom: silver;
  position: fixed;
  user-select: none;
}

.start {
  width: 45px;
  height: 14px;
  margin: 0;
}

.taskTime {
  display: flex;
  right: 0.25%;
  padding: 0 10px;
  border-top: 1px solid gray;
  border-left: 1px solid gray;
  vertical-align: middle;
  height: 21px;
  line-height: 21px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  font-weight: 400;
  color: #000;
  text-decoration: none;
}

.content {
  display: flex;
  width: 100%;
}

.format {
  width: max-width;
  margin: 0;
  margin-left: 2px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  flex-basis: 110px;
  flex-shrink: 1;
  min-width: 0;
}
<link rel="stylesheet" href="https://unpkg.com/98.css">
<div class="startbar">
  <section class="field-row">
    <button class="start"><b>Start</b></button>
    <section class="content">
      <button class="format">Random Program</button>
      <button class="format">Random Program</button>
      <button class="format">Random Program</button>
      <button class="format">Random Program</button>
      <button class="format">Random Program</button>
      <button class="format">Random Program</button>
      <button class="format">Random Program</button>
      <button class="format">Random Program</button>
      <button class="format">Random Program</button>
      <button class="format">Random Program</button>
      <button class="format">Random Program</button>
      <button class="format">Random Program</button>
    </section>

    <span class="taskTime">
                <span>21:00</span>
    </span>
  </section>
</div>

I have also made a Codepen here which demonstrates the screen width problem.

flexbox css html
1 Answers

Test this CSS:

    .field-row {
    display: flex;
    justify-content: space-between;
} 

.startbar {
        display:flex;
        position:fixed;
    height: 25px;
    width: 100%;
        overflow: hidden;
        font-weight: bold!important;
        padding: 2px;
        box-shadow: inset 1px 0 #fff;
        display: block;
        background-color: silver;
        bottom: 0%;
        left: 0;
        right: 0;
        border-top: 1px solid #f4f4f4;
        border-bottom: silver;
        position: fixed;
        user-select: none;
}

.start {
    width: 45px;
    height: 14px;
    margin: 0;
}

.taskTime span  {
    display: flex;
    justify-content: flex-end;
    padding: 0 10px;
    border-top: 1px solid gray;
    border-left: 1px solid gray;
    width: 30px;
    margin-left: auto;
    margin-right: 5px;
    vertical-align: middle;
    height: 21px;
    line-height: 21px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    font-weight: 400;
    color: #000;
    text-decoration: none;
}

.content {
    display: flex;
    width: calc(100% - 170px);
}

.format {
    width: max-width;
    margin: 0;
    margin-left: 2px;
    text-align: left;
    vertical-align: middle;
    
    
    white-space: nowrap;
    overflow: hidden;
    flex-basis: 110px;
    flex-shrink: 1;
    min-width: 0;
}
Leffa0
Related