Trying to modify the width of the columns in this flexbox

user_6773512 0
Viewed 49

I am trying to render rows with the date on the left and some text on the right. I cant seem to work out how I changed the widths of the columns though? Currently my day and text column are the same width. I'd like to have the day as 50px and the text as 300px.

Is it possible with this code?

.sb-flex-row {
  flex-direction: row;
  display: flex;
}

.sb-flex-column {
  flex-direction: column;
  display: flex;
}

.sb-flex-body {
  display: flex;
}

.sb-flex-body div:not([class*="flex"]) {
  border: 1px solid white;
  flex: 1 1 50px;
  width: 200px;
}
<div class="sb-flex-body">
  <div class="sb-flex-row">
    <div style="background: #0980cc;">day</div>
  </div>
  <div class="sb-flex-column">
    <div style="background: #09cc69;">month</div>
    <div style="background: #cc092f;">year</div>
  </div>
  <div class="sb-flex-row">
    <div style="background: #0980cc;">text</div>
  </div>
</div>

flexbox css html
2 Answers

I cleaned up and make it maybe simpler for you to understand. You have an outer wrapper that is flexible. The default direction is row and that is ok. Then you have two blocks. one block dateBlock and the second is a text block. the dateblock contains two blocks (a,b). and b you can assign the direction to the column. Afterward, you can assign the width to the text block and Dateblock. That is it :-)

.wrapper {  
  display: flex;
  gap:10px;
}

.dateBlock {
  display: flex;
  background: yellow;
  gap: 20px;
  padding: 10px;
  box-sizing: border-box;
}

.textBlock {
  background: green;
  padding: 10px;
  box-sizing: border-box;  
  width: 300px;
}

.monthYear {  
  display: flex;
  flex-direction: column;
  width:50px;
}

.day {
  font-size: 30px;
  width: 50px;  
}
<div class="wrapper">
  <div class="dateBlock">
    <div class="day">day</div>
    
    <div class="monthYear">
      <div>month</div>
      <div>year</div>
    </div>
  </div>
    
    <div class="textBlock">text</div>
  
</div>

user_148071110

I rearranged your markup a bit to easily target these divs in the style sheet. You can see the changes I made to your CSS under /* changes */. Also, take note of the HTML I adjusted.

.sb-flex-row {
  flex-direction: row;
  display: flex;
}

.sb-flex-column {
  flex-direction: column;
  display: flex;
}

.sb-flex-body {
  display: flex;
}

/* changes */
.sb-flex-body div:not([class*="flex"]) {
  border: 1px solid white;
  width: 50px;
}

.sb-flex-row > div {
  min-width: 300px;
}
<div class="sb-flex-body">
  <div class="sb-flex-column">
    <div style="background: #0980cc;">day</div>
    <div style="background: #09cc69;">month</div>
    <div style="background: #cc092f;">year</div>
  </div>

  <div class="sb-flex-row">
    <div style="background: #0980cc;">text</div>
  </div>
</div>

user_164963570
Related