Scrolling a flexbox with overflowing content

I’ve spoken to Tab Atkins (author of the flexbox spec) about this, and this is what we came up with: HTML: <div class=”content”> <div class=”box”> <div class=”column”>Column 1</div> <div class=”column”>Column 2</div> <div class=”column”>Column 3</div> </div> </div> CSS: .content { flex: 1; display: flex; overflow: auto; } .box { display: flex; min-height: min-content; /* needs vendor … Read more

Unique Key constraints for multiple columns in Entity Framework

With Entity Framework 6.1, you can now do this: [Index(“IX_FirstAndSecond”, 1, IsUnique = true)] public int FirstColumn { get; set; } [Index(“IX_FirstAndSecond”, 2, IsUnique = true)] public int SecondColumn { get; set; } The second parameter in the attribute is where you can specify the order of the columns in the index. More information: MSDN

How do I change Bootstrap 3 column order on mobile layout?

You cannot change the order of columns in smaller screens but you can do that in large screens. So change the order of your columns. <!–Main Content–> <div class=”col-lg-9 col-lg-push-3″> </div> <!–Sidebar–> <div class=”col-lg-3 col-lg-pull-9″> </div> By default this displays the main content first. So in mobile main content is displayed first. By using col-lg-push … Read more

Expand a div to fill the remaining width

The solution to this is actually very easy, but not at all obvious. You have to trigger something called a “block formatting context” (BFC), which interacts with floats in a specific way. Just take that second div, remove the float, and give it overflow:hidden instead. Any overflow value other than visible makes the block it’s … Read more